摇摆不定的动画很棒!但是如果没有用户交互,我就无法工作.
总正常ng重复列表:
<div ng-controller="controller">
<div class="category" ng-repeat="category in categories">
{{category}}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
在控制器中定义:
var controller = function($scope) {
$scope.categories = ['12345', '6789', '9876', '54321'];
};
Run Code Online (Sandbox Code Playgroud)
还有一些CSS动画规则:
.category.ng-enter {
-webkit-transition: 2s linear all;
transition: 2s linear all;
opacity:0;
}
.category.ng-enter-stagger {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.category.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
Run Code Online (Sandbox Code Playgroud)
但在页面加载时它显示没有动画.我插入了一个用随机数替换categories数组的按钮,它就会很好地消失.
当用户第一次访问该页面时,我需要做些什么才能使动画正常工作?
演示在这里:http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p = preview
我找到了一些黑客攻击的答案,$timeout()但我只在第一项上获得动画.它感觉不舒服.
javascript animation angularjs angularjs-ng-repeat angularjs-animation