javascript - Angular.JS 延迟动画的路线更改

Question

我使用 Semantic UI 作为前端框架。其中，我有一个 Javascript 函数用于创建一些转换，更多信息 Here .

我想用它在 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

但我认为你需要的是

• 向 ng-view (/ui-view?) 元素添加一个类，例如“my-animated-view”
• 编写类似于下面的代码(从上面的页面复制+修改)，自定义“进入”过渡以过渡进入的 View 。如果您希望在 View 离开时进行过渡，请在“离开”时进行。其他的可以保留为默认值(只需调用 did() 函数来告诉 Angular 动画已完成)，因为我认为您在您的情况下不需要它们

Angular 会做的是在进入 View 时，它将调用“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) {}
  };
});