NG-動畫不會讓動畫完成對<code>ng-view</code>

Question

我已設置動畫褪色1秒，但它不會讓動畫出完了：

.fadethis { 
    &.ng-enter, &.ng-leave { 
     -webkit-transition: all linear 1s; 
     -moz-transition: all linear 1s; 
     transition: all linear 1s; 
     display: block !important; 
    } 

    &.ng-enter, &.ng-leave.ng-leave-active { 
     opacity:0; 
    } 

    &.ng-leave, &.ng-enter.ng-enter-active { 
     opacity:1; 
    } 
} 

我不能讓角-animate先完成1秒動畫？

DEMO：http://jsfiddle.net/bnyJ6/79/

Answer 1

它看起來並不像你比如你的觀點實際上是淡出。如果確實如此，則導航到的頁面將顯示並在上一頁完成淡出之前開始淡入。

目前我相信最簡單的方法來模擬等待對方的動畫是添加一個轉換延遲到輸入動畫（source）。

雖然這可能會變得混亂。在您的示例中，您正在瀏覽的頁面在淡入之前仍然會佔用空間，並且會逐漸減少正在淡出的頁面。您可以通過將您的視圖設置爲position: absolute;來解決此問題。

演示無transition-delay：http://jsfiddle.net/5evFx/

演示與transition-delay和position: absolute：http://jsfiddle.net/spKnX/

工作標記：

<div ng-view class="view fadein fadeout"></div> 

工作CSS：

.fadein.ng-enter, 
.fadeout.ng-leave { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    -o-transition: all linear 1s; 
    transition: all linear 1s; 
    display: block !important; 
} 

.fadein.ng-enter { 
    opacity: 0; 
} 

.fadeout.ng-leave { 
    opacity: 1; 
} 

.fadein.ng-enter.ng-enter-active { 
    transition-delay: 1s; 
    opacity: 1; 
} 

.fadeout.ng-leave-active { 
    opacity: 0; 
} 

html, body, .container { 
    height: 100%; 
} 

.view { 
    position: absolute; 
}