Angular.JS延遲路由更改爲動畫

我使用語義UI作爲前端框架。其中，我有一個Javascript函數來創建一些轉換，更多信息Here。Angular.JS延遲路由更改爲動畫

我想用它在Angular.JS中創建路徑更改動畫。我試着這樣做：

app.run(['$location', '$rootScope', function($location, $rootScope) { 
    $rootScope.$on('$routeChangeStart', function (event, next) { 
     $("#main").transition('fade up', '300ms'); 
    }); 
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { 
     $("#main").transition('fade down', '300ms'); 
    }); 
}])

#main是DOM元素哪裏是我的NG-視圖。但它不起作用，因爲路線變化太快。所以，我的問題是，我可以推遲路線改變嗎？或者也許是更好的解決方案？

來源

2013-12-18 Siper

這樣的直接DOM操作在Angular中真的不鼓勵。您嘗試使用純CSS的效果是什麼？如果是這樣，你可以看看適用於ngView的動畫效果：http://docs.angularjs.org/api/ngRoute.directive:ngView –

我認爲考慮延遲路線改變並不是一個好主意，因爲如果快速連續發生路線變化，您可能會遇到問題。

然而，Angular支持動畫，其中包括JavaScript推動的轉換（可能是Semantic UI中的轉換）。有一個信息在

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#how-to-make-animations-in-angularjs

但我認爲你需要的是

公平位添加一個類，如「我的動畫視圖」，到NG-查看（/ ui-view？）元素
編寫類似於以下內容的代碼（從上面的頁面複製+修改），自定義「進入」過渡到過渡視圖進來。如果您想要離開視圖的過渡，在「請假」上做。其他人可以保留默認（這只是調用done（）函數告訴Angular動畫完成），因爲我不認爲你需要他們在你的情況下

什麼角度會做的是在進入視圖中，它會調用「進入」轉換，並在您調用傳遞的「完成」函數後進行清理。

myApp.animation('.my-animated-view', function() { 
    return { 
    enter : function(element, done) {  
     //node the done method here as the 3rd param 
     $(element).transition('fade up', '300ms', done); 

     return function(cancelled) { 
     /* this (optional) function is called when the animation is complete 
      or when the animation has been cancelled (which is when 
      another animation is started on the same element while the 
      current animation is still in progress). */ 
     if(cancelled) { 
      // Something here to stop? 
     } 
     } 
    }, 

    leave : function(element, done) { done(); }, 
    move : function(element, done) { done(); }, 

    beforeAddClass : function(element, className, done) { done(); }, 
    addClass : function(element, className, done) { done(); }, 

    beforeRemoveClass : function(element, className, done) { done(); }, 
    removeClass : function(element, className, done) { done(); }, 

    allowCancel : function(element, event, className) {} 
    }; 
});

來源

2013-12-18 15:12:22

Angular.JS延遲路由更改爲動畫

回答

相關問題