0

我使用 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 在哪里。但它不能正常工作，因为路线变化变得太快。所以，我的问题是，我可以延迟更改路线吗？或者也许是一个更好的解决方案？

4

1 回答 1

2

我认为考虑延迟更改路线并不是一个好主意，因为如果路线快速连续更改，您可能会遇到问题。

但是，Angular 已经内置了对动画的支持，包括 javascript 驱动的转换，比如（可能）来自语义 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”
  • 编写类似于下面的代码（从上面的页面复制+修改），自定义“进入”转换到进入的转换视图。如果你想在离开的视图上进行转换，请在“离开”时进行。其他的可以保留为默认值（它只是调用 done() 函数来告诉 Angular 动画完成了），因为我认为你不需要它们

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-18T15:12:22.277 回答