Javascript 防止在初始页面加载时触发动画
我已经在Javascript 防止在初始页面加载时触发动画,javascript,css,angularjs,animation,Javascript,Css,Angularjs,Animation,我已经在ng view指令上使用带有Angular 1.2的ngAnimate创建了一个简单的旋转立方体动画,并具有以下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 view
指令上使用带有Angular 1.2的ngAnimate
创建了一个简单的旋转立方体动画,并具有以下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>
这真是太棒了。问题是:如何阻止动画在初始第一页加载时触发,并且仅在路由更改时应用
谢谢 您需要动态应用动画类,如下所示: 我相信这可以在任何事件上完成,例如路线变更事件 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-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;
}
angular.module('App', ['ngAnimate']);
JavaScript:
<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-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;
}
angular.module('App', ['ngAnimate']);
这是我的解决办法。在page init几秒钟后设置一个类,然后在所有动画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>