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

Question

我想在我的路由更改时向我的包装器添加一个特定的类，以便我可以控制将触发的 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);
    });
});

但是没有添加类，我是不是用错了这个函数？

Answer 1

您的代码所做的是将正确的 CSS 类添加到 #wrapper 元素，然后在添加后立即将其删除。 addClass 函数(您用来删除类)返回的 promise 在添加类时得到解决，而不是在类定义的动画完成时得到解决。

如果您想在动画完成后从 #wrapper 中删除 CSS 类，以便您可以为下一个动画重置它，您需要将代码绑定(bind)到 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');
       }
     }
  );