有沒有一種方法，我可以從一個屏幕淡入到另一個AngularJS和UI路由器

Question

當我從一個狀態改變到另一個狀態時，一些過渡看起來非常快。是否有一種簡單的方法可以讓我的屏幕過渡並淡入淡出。我並不認爲即使是0.2秒和0.2秒也沒問題。

我希望從哪裏開始尋找以及如何做到這一點的建議。

Answer 1

角UI路由器提供了一些事件而改變，如規定：

• $ stateChangeStart
• $ stateChangeSuccess等

$ rootScope在$（ '$ stateChangeStart'，

。

function(event, toState, toParams, fromState, fromParams, options){ 
    event.preventDefault(); 
    // transitionTo() promise will be rejected with 
    // a 'transition prevented' error 
}); 

或

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... }) 

我建議您使用'$stateChangeSuccess'並添加$超時或任何其他動畫從一個狀態淡出到另一個狀態。

欲瞭解更多，你可以參考以下鏈接： State Change events in angular ui-router 希望這會有所幫助。

Answer 2

直起Frequently Asked Questions上UI-Router wiki：

How to: Animate ui-view with ng-animate

當包括angular-animate JavaScript的資產，UI-路由器全自動增加ng-enter，ng-enter-active，ng-leave和ng-leave-active類的狀態改變用戶界面視圖。您可以使用這些附加自己的CSS動畫：

CSS：

[ui-view].ng-enter, [ui-view].ng-leave { 
    position: absolute; 
    left: 0; 
    right: 0; 
    -webkit-transition:all 1s ease-in-out; 
    -moz-transition:all 1s ease-in-out; 
    -o-transition:all 1s ease-in-out; 
    transition:all 1s ease-in-out; 
} 

[ui-view].ng-enter { 
    opacity: 0; 
} 

[ui-view].ng-enter-active { 
    opacity: 1; 
} 

[ui-view].ng-leave { 
    opacity: 1; 
} 

[ui-view].ng-leave-active { 
    opacity: 0; 
} 

這裏有Plunker一個例子：http://plnkr.co/edit/nx2enw?p=preview