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

Posted 2023-03-06

【中文标题】防止动画在初始页面加载时触发

【英文标题】：Prevent animation from firing on inital page load

【发布时间】：2013-12-10 00:40:50

【问题描述】：

我使用带有 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>

这非常有效。问题是：如何阻止动画在初始页面加载时触发，并且仅在路由更改时应用？

谢谢！

【参考方案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']);

【参考方案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>

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

然后是css代码，只添加动画css：

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