0

当我的路线改变时，我想在我的包装器中添加一个特定的类，这样我就可以控制将触发什么 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);
    });
});

但是没有添加任何类，我是否以错误的方式使用此功能？

4

1 回答 1

1

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

如果您要做的是#wrapper在动画完成后从 中删除 CSS 类，以便您可以为下一个动画重置它，您需要将代码绑定到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');
       }
     }
  );
于 2015-06-11T11:13:34.530 回答