防止动画在页面初始加载时触发。

Question

我在Angular 1.2上使用ngAnimate创建了一个简单的旋转立方体动画，并在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>

这个功能非常好用。问题是：我该如何停止在初始第一页加载时触发动画，只有在路由改变时才应用？

谢谢！

- subZero

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

- Nader Chehab

Answer 2

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

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>

你可以在需要进行动画的特定标签上添加ng-class。

然后，CSS代码只需添加动画CSS即可：

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

- raykin