我一直使用http://www.yearofmoo.com/2013/12/staggering-animations-in-angularjs.html作为我的动画实现.ng-enter-stagger的参考指南,但它对我不起作用。我已经尝试重新排序我的代码,而不是使用SASS等。我发现的所有资源都表明我应该使用它作为指南(它只实现了大约4行实际的CSS):
.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
/* notice how we're using animation instead of transition here */
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
/* yes we still need to do this too */
-webkit-animation-duration:0;
animation-duration:0;
}
下面是我的CSS和相关的ng-repeat我正在尝试执行动画。这段代码出了什么问题?
查看:
<div class="gray-section repeat-animation" ng-repeat="customer in ctrl.filteredCustomers | paginate:ctrl.paginator">
SASS:
.repeat-animation {
&.ng-enter-stagger {
transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;
transition-duration: 0 !important;
-moz-transition-duration: 0 !important;
-o-transition-duration: 0 !important;
-webkit-transition-duration: 0 !important;
}
&.ng-enter {
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
transform: translate(0px, 100px);
opacity: 0;
}
&.ng-leave {
&.ng-leave-active {
display: none;
}
}
}
全局app.js:
apps.Global = angular.module('Global', [
'ngAnimate',
apps.CustomersPage.module.name,
lfl.paginator.module.name
]);
angular.bootstrap(document.body, [apps.Global.name]);