不能触发嵌套ngRepeat动画 [英] Can't trigger animation on nested ngRepeat

问题描述

我无法弄清楚如何触发一个嵌套的ngRepeat动画与棱角分明。

CSS类.TEST的动画。当使用.TEST在内ngRepeat它不工作（ Plunker ）

 ＆LT; D​​IV NG重复=节中节＆GT;
  ＆LT; D​​IV NG重复=项section.items级=测试＆GT;
    ＆LT; H2＆GT; {{item.title}}＆LT; / H＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

在上外ngRepeat使用.TEST它的工作（ Plunker ）

 ＆LT; D​​IV NG重复=节中节＆GT;
  ＆LT; D​​IV NG重复=项section.items级=测试＆GT;
    ＆LT; H2＆GT; {{item.title}}＆LT; / H＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

您可能需要添加<一个href=\"https://github.com/angular/angular.js/commit/931789ec1476e1d06739e63cb423eb87172b5ebc\">ngAnimateChildren属性在父容器上，并更新CSS为好。

尝试： -

 ＆LT; D​​IV NG重复=一节中节NG-动画，儿童＆GT;
  ＆LT; D​​IV NG重复=项section.items级=测试＆GT;
    ＆LT; H2＆GT; {{item.title}}＆LT; / H＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和

  .test.ng-举动，
.test.ng输入，
.test.ng休假{
  -webkit-转型：所有的0.3秒轻松淘汰;
    过渡：所有的0.3秒轻松淘汰;
}.test.ng-leave.ng休假活跃，
.test.ng-举动，
.test.ng输入{
   不透明度：0;
   -webkit-变换：翻译（-20px，0）;
    变换：翻译（-20px，0）;
}.test.ng休假，
.test.ng-move.ng-举动活跃，
.test.ng-enter.ng进入活跃{
 不透明度：1;
   -webkit-变换：翻译（0，0）;
    变换：翻译（0，0）;
}
 

Plnkr

从 DOC 发现这个

  

请记住，在默认情况下，如果动画正在运行，任何子元素不能被动画直到父元素的动画已完成。此屏蔽功能可以通过将NG-动画子女在父容器标签属性覆盖。

即使有父重复没有动画，它看起来像 NG-动画只是忽略了其子女的任何进一步的动画。

I can't figure out how to trigger animations on a nested ngRepeat with Angular.

The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work (Plunker):

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

When using ".test" on the outer ngRepeat it does work (Plunker):

<div ng-repeat="section in sections">
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

解决方案

You probably need to add ngAnimateChildren attribute on the parent container, and update the css as well.

Try:-

<div ng-repeat="section in sections" ng-animate-children>
  <div ng-repeat="item in section.items" class="test">
    <h2>{{item.title}}</h2>
  </div>
</div>

and

.test.ng-move,
.test.ng-enter,
.test.ng-leave {
  -webkit-transition: all 0.3s  ease-out;
    transition: all 0.3s  ease-out;
}

.test.ng-leave.ng-leave-active,
.test.ng-move,
.test.ng-enter {
   opacity:0;
   -webkit-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
}

.test.ng-leave,
.test.ng-move.ng-move-active,
.test.ng-enter.ng-enter-active {
 opacity:1;
   -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

Plnkr

Found this from the doc

Keep in mind that, by default, if an animation is running, any child elements cannot be animated until the parent element's animation has completed. This blocking feature can be overridden by placing the ng-animate-children attribute on a parent container tag.

Even though there is no animation on the parent repeat, it seems like ng-animate just ignores any further animation on its children.

这篇关于不能触发嵌套ngRepeat动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！