Angular.js 页面转换 & $animate.addClass

Question

我想在我的路线更改时向我的包装器添加一个特定的 class，这样我就可以控制将触发什么 CSS 动画。

我试着这样做： http://plnkr.co/edit/KRwBFb6bCTkit9eKg8yb?p=preview

$rootScope.$on( "$routeChangeSuccess", function(event, next, current) {
   //Code to skip animation on the first load/page
    if( 'undefined' === typeof current || $scope.pageClass == '' ) return false;


    var elem = document.querySelector("#wrapper");
    var viewElem = angular.element(elem);

    $animate.addClass(viewElem, $scope.pageClass).then(function(){
        $animate.removeClass(viewElem, $scope.pageClass);
    });
});

但是没有添加class，我是不是用错了这个功能？

Answer 1

您的代码所做的是将正确的 CSS class 添加到 #wrapper 元素，然后在添加后立即将其删除。 addClass 函数返回的承诺（您用来删除 class）在添加 class 时解决，而不是在 class 定义的动画是完全的。

如果您想要做的是在动画完成后从 #wrapper 中删除 CSS class，以便您可以为下一个需要的动画重置它而是将您的代码绑定到 enter 事件。类似于以下内容：

$animate.on('enter', angular.element(document.querySelector("#wrapper")),
     function callback(element, phase) {
       if (phase === 'close') {
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'RL');
         $animate.removeClass(angular.element(document.querySelector("#wrapper")), 'LR');
       }
     }
  );

Angular.js 页面转换 & $animate.addClass

Angular.js page transition & $animate.addClass

javascript

css

angularjs

angularjs-animation