页面加载时的 AngularJS 1.2 ng-repeat 动画 [英] AngularJS 1.2 ng-repeat animation on page load
问题描述
惊人的动画很棒!但是如果没有用户交互,我就无法让它工作.
有一个完全正常的 ng-repeat 列表:
<div class="category" ng-repeat="category in category">{{类别}}
在控制器中定义:
var controller = function($scope) {$scope.categories = ['12345', '6789', '9876', '54321'];};
还有一些动画的 CSS 规则:
.category.ng-enter {-webkit-transition:2s 线性全部;过渡:2s线性全部;不透明度:0;}.category.ng-输入交错{-webkit-transition-delay: 1s;转换延迟:1s;}.category.ng-enter.ng-enter-active {/* 标准过渡样式 */不透明度:1;}
但是在页面加载时它没有动画显示.我插入了一个按钮,用于用随机数替换类别数组,它淡入淡出就好了.
当用户第一次访问页面时,我需要做什么才能使动画工作?
演示在这里:http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview
我找到了一些用 $timeout()
破解的答案,但我只在第一项上得到了动画.而且感觉不舒服.
在引导时禁用动画是设计使然,请参阅:#5130.
lioli 的评论中提供了一种解决方法(一个肮脏的黑客),可以在页面加载时启用动画.
将此行放在控制器的开头(不要忘记注入 $rootElement
).
$rootElement.data("$$ngAnimateState").running = false;
Plunker 示例: http://plnkr.co/edit/9ZZ3JBOCaRJ41ssczX6l?p=预览
对于您仅在第一项上获得动画的问题.据报道,这是一个仅在 angular-animate 的缩小版本中才会发生的错误,即 angular-animate.min.js
.
在上面的 plunker 中,我已更改为未缩小的 angular-animate.js
并且它似乎工作正常.
有关问题的更多详细信息,请参阅:#8297 和
Staggering Animations are great! But I don't get it to work without user interaction.
There is a total normal ng-repeat list:
<div ng-controller="controller">
<div class="category" ng-repeat="category in categories">
{{category}}
</div>
</div>
Defined in a controller:
var controller = function($scope) {
$scope.categories = ['12345', '6789', '9876', '54321'];
};
And a few CSS Rules for animation:
.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;
}
But on page load its displayed without animation. I inserted a button for replacing the categories array with random numbers and it fades in just fine.
What do I have to do to get the animation to work, when the user visits the page the first time?
Demo is here: http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview
I found some answers that hacking around with $timeout()
but I get an animation only on the first item. And it don't feel well.
It's by design that the animation is disabled while bootstraping, see: #5130.
There is a workaround (a dirty hack) provided in a comment by lioli to enable animation on page load.
Put this line at the beginning of your controller (do not forget to inject the $rootElement
).
$rootElement.data("$$ngAnimateState").running = false;
Example Plunker: http://plnkr.co/edit/9ZZ3JBOCaRJ41ssczX6l?p=preview
For the issue that you get an animation only on the first item. It's been reported that this is a bug that happens only with a minified version of angular-animate i.e. angular-animate.min.js
.
In the plunker above, I've changed to an unminified angular-animate.js
and it seems to work fine.
For more detail of the issue, see: #8297 and #7547
这篇关于页面加载时的 AngularJS 1.2 ng-repeat 动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!