angularjs状态改变动画滑入滑出答案

【问题标题】：angularjs state change animation slide in and outangularjs状态改变动画滑入滑出
【发布时间】：2015-08-27 16:24:19
【问题描述】：

在单页应用程序中，我想在单击按钮时为新页面向右滑动，为旧页面向左滑动。在更改状态之前，我尝试将相应的 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。

我该如何解决这个问题？

【问题讨论】：

是的，这是完全可行的。该视频有助于了解 <ui-view> 如何被克隆以允许动画 youtube.com/watch?v=W89DYSthCTQ
@charlietfl 我找不到处理视频中我的场景的方法。即使我正在使用 ng-enter 和 ng-leave。但正如我提到的，我无法在 html 中静态关联 CSS 类。我必须在同一个容器中的 slideIn 和 slideOut 之间切换。

标签： angularjs ng-animate

【解决方案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";
    }               
});

【讨论】：