我正在尝试在ng-view中的两个动画类之间切换。这就是我在html中设置ng-view的方式：
<div id="animation-container" class="view-animate-container">
<div id="ng-view" ng-view class="view-animate"></div>
</div>
这是我的第一个动画的CSS
.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
display:block;
position:absolute;
top:0;
left:0;
}
.view-animate.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
}
.view-animate.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}
.view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
}
第二动画：
.view-leave.ng-enter, .view-leave.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
display:block;
position:absolute;
top:0;
left:0;
}
.view-leave.ng-enter {
opacity:0;
-webkit-transform: translate3d(-100%, 0, 0);
}
.view-leave.ng-enter.ng-enter-active {
opacity:1;
-webkit-transform: translate3d(0, 0, 0);
}
.view-leave.ng-leave.ng-leave-active {
opacity:0;
-webkit-transform: translate3d(100%, 0, 0);
}
我要做的就是在单击后退按钮时将类从view-enter更改为view-leave。
<a id="back-btn" class="btn back" href="javascript:history.back()">BACK</a>
我写的这个Jquery代码几乎完成了工作，但不是100％：
$("#back-btn").click(function(){
$("#ng-view").attr('class','view-leave');
});
它似乎在朝着正确的方向动画离开的容器，但没有使进入的容器动画。因此，我正在寻找看似简单的问题的简单解决方案。
对于可能正在寻找此问题的简单解决方案的其他任何人，请使用@muenchdo答案进行扩展。过渡结束后，我将超时设置为恢复到上一个动画。
像这样：
$scope.animationClass = "view-enter";
$scope.toggleAnimation = function() {
$scope.animationClass = "view-leave";
$timeout(function() {
$scope.animationClass = "view-enter";
}, 350);
}
这是我可以找到的最简单的方法，希望这可以帮助正在寻找一种简单解决方案（似乎简单功能）的人。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句