防止动画

Question

我已经创建使用ngAnimate与角1.2 ng-view指令简单的立方体旋转动画，有这样的CSS：

.cube-container { 
    -webkit-transform-style: preserve-3d; 
    -webkit-perspective:400px; 
    height:100%; 
} 
.cube.ng-enter, 
.cube.ng-leave { 
    -webkit-transition: 0.8s linear all; 
} 
.cube.ng-enter { 
    -webkit-transform-origin: 100% 50%; 
    -webkit-transform: translateX(-100%) rotateY(-90deg); 
} 
.cube.ng-enter.ng-enter-active { 
    -webkit-transform: translateX(0%) rotateY(0deg); 
} 

.cube.ng-leave { 
    -webkit-transform-origin: 0% 50%; 
} 
.cube.ng-leave.ng-leave-active { 
    -webkit-transform: translateX(100%) rotateY(90deg); 
} 

的标记看起来是这样的：

<div class="cube-container"> 
    <div class="app cube" ng-view></div> 
</div> 

这工作绝对好。问题是：如何阻止动画在初始首页加载时触发，并且仅在路线更改时应用？

谢谢！

Answer 1

您需要动态地应用动画类如下所示：

http://jsfiddle.net/J63vD/

我相信这可以在任何情况下完成，如路由变化事件。

HTML：

<div ng-app="App"> 
    <input type="button" value="set" ng-click="myCssVar='css-class'" /> 
    <input type="button" value="clear" ng-click="myCssVar=''" /> 
    <span ng-class="myCssVar">CSS-Animated Text</span> 
</div> 

CSS：

.css-class-add, .css-class-remove { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.css-class, 
.css-class-add.css-class-add-active { 
    color: red; 
    font-size:3em; 
} 

.css-class-remove.css-class-remove-active { 
    font-size:1.0em; 
    color:black; 
} 

的JavaScript：

angular.module('App', ['ngAnimate']); 

Answer 2

这里是我的解决方案。在页面初始化几秒后设置一个类，然后在所有动画CSS选择器上添加此类。 的JS代码示例：

myAppModule.run(function($rootScope, $timeout) { 
    $timeout(function() { 
    $rootScope.pageInited = true; 
    }, 5000) 
}); 

html代码：

<div class="cube-container"> 
    <div class="app cube" ng-view ng-class="{'page-inited': pageInited}"></div> 
</div> 

，你可以在需要是有生命的特定标签添加纳克级。

然后CSS代码，只加上动画的CSS：

.page-inited.cube.ng-enter, 
.page-inited.cube.ng-leave { 
    -webkit-transition: 0.8s linear all; 
}