angularjs 状态变化动画滑入滑出

Question

在单页应用程序中，我想在单击按钮时为新页面提供向右滑动，为旧页面提供向左滑动。在状态更改之前，我尝试将相应的 css 类(感谢 http://dfsq.github.io/ngView-animation-effects/app/#/page/1)应用于具有 ui-view 指令的元素。

在 html 中，如果我保留该类，动画将正常工作。但总是一个方向。

<div class="site-wrapper slide-right" ui-view></div>

但由于我必须在向右滑动和向左滑动之间切换，所以我将类动态应用到 ui-view 元素，如下所示。

<div class="site-wrapper" ui-view></div>

 if(args.slideDir && args.slideDir==='slide-right') {                    
    angular.element(document.querySelector(elt)).removeClass('slide-left');
    angular.element(document.querySelector(elt)).addClass('slide-right');
 } else {
    angular.element(document.querySelector(elt)).removeClass('slide-right');
    angular.element(document.querySelector(elt)).addClass('slide-left');
 }

 $state.go(args.hash);

但是页面动画是这样的。

真正的罪魁祸首是，AngularJS 在克隆 ui-view 元素时使用了我的旧 DOM。

我该如何解决？

Answer 1

我找到了解决方案。 ng-class 是关键。使用 ng-class 而不是 class。

<div class="site-wrapper" ng-class="slideDir" ui-view></div>

$state.go(args.hash, {slideDir:'slide-right'});//for slide right

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
    if(toParams.slideDir && toParams.slideDir==='slide-right') {        
        $rootScope.slideDir = "slide-right";
    } else { //back button will not have any params associated
        $rootScope.slideDir = "slide-left";
    }               
});