对于动画，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) {}
  };
});