在UI路由器中狀態轉換之間淡入淡出動畫

Question

我在我的web應用程序中使用UI路由器。根格代碼：

<div ui-view="content" class="fade-in-up"></div> 

當我從一個狀態到另一個（/訂單，在下面的截圖/反饋），新州的動畫漸變結束前的第一個狀態不隱藏。

我的CSS是：

@-webkit-keyframes fadeInUp { 
    0% { 
opacity: 0; 
-webkit-transform: translateY(15px); 
} 
100% { 
opacity: 1; 
-webkit-transform: translateY(0); 
} 
} 
@-moz-keyframes fadeInUp { 
0% { 
opacity: 0; 
-moz-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -moz-transform: translateY(0); 
} 
} 
@-o-keyframes fadeInUp { 
0% { 
opacity: 0; 
-o-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -o-transform: translateY(0); 
    } 
    } 
    @keyframes fadeInUp { 
    0% { 
    opacity: 0; 
    transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    transform: translateY(0); 
    } 
    } 
    .fade-in-up { 
    -webkit-animation: fadeInUp .5s; 
    animation: fadeInUp .5s; 
    } 

我在哪裏錯了？

Answer 1

我剛剛發佈了一個tutorial with a working demo顯示如何使用ngAnimate與CSS轉換執行此操作。

有一對夫婦在演示的轉變，這是主要的元素在新的觀點衰落CSS代碼片段：

/* start 'enter' transition on main view */ 
main.ng-enter { 
    /* transition on enter for .5s */ 
    transition: .5s; 

    /* start with opacity 0 (invisible) */ 
    opacity: 0; 
} 

/* end 'enter' transition on main view */ 
main.ng-enter-active { 
    /* end with opacity 1 (fade in) */ 
    opacity: 1; 
} 

這裏只有對.ng-enter而不是.ng-leave的過渡，這將導致新視圖（即輸入）淡入，而舊視圖（即將離開）在沒有轉換的情況下立即消失。

Answer 2

您可以使用.ng-enter和.ng-leave類（如果您已包含'ng-animate'模塊）來觸發動畫。然後，你可以做這樣的事情在你的CSS文件：

[ui-view].ng-leave { 
    animation: fadeOut 0.5s; 
} 

[ui-view].ng-enter { 
    animation: fadeIn 0.5s; 
} 

或只設置一個過渡性質與變換和不透明性的持續時間和剛剛成立相應的他們在ng-enter和ng-leave類。

Answer 3

嘗試添加類「主力」你DIV所以它看起來是這樣的：

<div ui-view="content" class="main"></div> 

然後使用這個CSS：

.main.ng-enter { 
    transition: 0.25s; 
    opacity: 0; } 
.main.ng-enter-active { 
    opacity: 1; } 
.main.ng-leave { 
    transition: 0.25s; 
    opacity: 1; } 
.main.ng-leave-active { 
    opacity: 0; } 

Answer 4

ui-router將激發你的ui-view路線更改視圖出來的與傳入視圖相同的時間。因此，您得到的是以前的ui-view仍然可見，而下一個ui-view已呈現，並且如果您將視圖動畫化，那麼會出現重疊的轉換持續時間舊觀點和新觀點。你應該看看上呈現新的ui-view直到舊持觀望完成了動畫（動畫在新的一個前）

我將調查ui-router$rootScope狀態改變事件進入這個（https://github.com/angular-ui/ui-router/wiki#state-change-events）。

## Hold off on the state change, until current (previous) state has finished animating out 
$rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change start", arguments 

$rootScope.$on '$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change success", arguments 

也看看這個人的例子http://homerjam.github.io/angular-ui-router-anim-in-out。他們創造了鉤到ui-view和分裂開的變化爲enter和leave模塊，你可以觸發（老視）的動畫出來後（新視圖）的動畫http://homerjam.github.io/angular-ui-router-anim-in-out/anim-in-out.js

這個人說明了什麼正在發生ui-view更改複製https://youtu.be/W89DYSthCTQ?t=345