angularjs状态更改动画滑入和滑出

在单页应用程序中，单击按钮时，我希望为新页提供右幻灯片，为旧页提供左幻灯片。在我的状态更改之前，我尝试将相应的css类应用于具有ui视图指令的元素（多亏了）

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

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

但由于我必须在幻灯片右侧和幻灯片左侧之间切换，所以我将该类动态应用于ui视图元素，如下所示

<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);

如果（args.slideDir&&args.slideDir==='slide-right'）{
angular.element（document.querySelector（elt））.removeClass（'slide-left'）；
angular.element（document.querySelector（elt））.addClass（'slide-right'）；
}否则{
angular.element（document.querySelector（elt））.removeClass（'slide-right'）；
angular.element（document.querySelector（elt））.addClass（'slide-left'）；
}
$state.go（args.hash）；

但是页面动画是这样工作的。

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

---

如何解决这个问题？

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

<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";
    }               
});

$state.go（args.hash，{slideDir:'slide-right'}）//幻灯片右侧
$rootScope.$on（“$stateChangeStart”，函数（事件、toState、toParams、fromState、fromParams）{
如果（toParams.slideDir&&toParams.slideDir==='slide-right'）{
$rootScope.slideDir=“向右滑动”；
}否则{//back按钮将不会有任何关联的参数
$rootScope.slideDir=“向左滑动”；
}               
});

是的，这是完全可行的。本视频有助于理解

是如何被克隆以允许动画@charlietfl的。我在视频中找不到处理我的场景的方法。甚至我也在使用ng enter和ng leave。但是正如我提到的，我不能在html中静态地关联CSS类。我必须在同一容器中的slideIn和slideOut之间切换。