在页面加载AngularJS 1.2纳克重复动画 [英] AngularJS 1.2 ng-repeat animation on page load

问题描述

错开动画是伟大的！但我不明白这一点，而无需用户交互工作。

Staggering Animations are great! But I don't get it to work without user interaction.

一共有普通NG重复列表：

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'];
};

和几个CSS规则动画：

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?

演示是在这里： 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.

推荐答案

这是由设计，虽然的Bootstrap，看到动画被禁用：的＃5130 。

It's by design that the animation is disabled while bootstraping, see: #5130.

有是lioli在注释中提供一种解决方法（一个肮脏的黑客）对页面加载启用动画。

There is a workaround (a dirty hack) provided in a comment by lioli to enable animation on page load.

把这一行在控制器的开头（不要忘记注入 $ rootElement的）。

Put this line at the beginning of your controller (do not forget to inject the $rootElement).

$rootElement.data("$$ngAnimateState").running = false;

示例Plunker： http://plnkr.co /编辑/ 9ZZ3JBOCaRJ41ssczX6l？p = preVIEW

有关您仅在第一个项目拿到动画中的问题。它的报道，这是只与角动画的一个缩小的版本，即角animate.min.js 。

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.

在上面的plunker，我改变了一个unminified 角animate.js ，似乎很好地工作。

In the plunker above, I've changed to an unminified angular-animate.js and it seems to work fine.

有关问题的更多详细信息，请参阅：＃8297 和<一个HREF =htt​​ps://github.com/angular/angular.js/issues/7547相对=nofollow>＃7547

For more detail of the issue, see: #8297 and #7547

这篇关于在页面加载AngularJS 1.2纳克重复动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！