html禁止页面动画,javascript – 防止动画在初始页面加载时触发

我使用ngAnimate和Angular 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);

}

标记看起来像这样：

这非常棒.问题是：如何阻止动画在初始第一页加载时触发,并且仅在路径更改时应用？

谢谢！

最佳答案 您需要动态应用动画类,如下所示：

我相信这可以在任何事件上完成,例如路线改变事件.

HTML：

CSS-Animated Text

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