對於動畫，Angular.JS延遲路線更改

Question

我正在使用Semantic UI作為前端框架。 在其中，我有一個Javascript函數用於創建一些過渡，更多信息在這里 。

我想用它來在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-view。 但它並不適用，因為路線變化太快了。 所以，我的問題是，我可以延遲路線改變？ 或者可能是更好的解決方案？

Answer 1

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

然而，Angular已經內置了對動畫的支持，包括javascript驅動的轉換，如（可能）來自Semantic UI的轉換。 有相當多的信息

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

但我認為你需要的是

• 將一個類（如“my-animated-view”）添加到ng-view（/ ui-view？）元素中
• 編寫類似於下面的代碼（從上一頁復制+修改），自定義“進入”過渡到過渡視圖。如果你想要離開視圖的過渡，請在“離開”上進行。 其他可以保留為默認值（只需調用done（）函數告訴Angular動畫完成），因為我認為你不需要它們

Angular將在輸入視圖時執行什么操作，它將調用“enter”轉換，並在調用傳遞的“done”函數后進行清理。

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) {}
  };
});