无法在嵌套的 ngRepeat 上触发动画 [英] Can't trigger animation on nested ngRepeat

问题描述

我不知道如何使用 Angular 在嵌套的 ngRepeat 上触发动画.

CSS 类.test"是动画的.在内部 ngRepeat 上使用.test"时它不起作用(Plunker):

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

当在外部 ngRepeat 上使用.test"时它确实有效(Plunker):

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

解决方案

你可能需要添加 ngAnimateChildren 父容器上的属性，并更新 css.

尝试:-

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

和

.test.ng-move,.test.ng-输入，.test.ng-离开{-webkit-transition:所有 0.3 秒缓出；过渡:所有 0.3 秒缓出；}.test.ng-leave.ng-leave-active,.test.ng-移动，.test.ng-输入{不透明度:0;-webkit-transform: translate(-20px, 0);变换:翻译(-20px，0)；}.test.ng-离开，.test.ng-move.ng-move-active,.test.ng-enter.ng-enter-active {不透明度:1；-webkit-transform: 翻译 (0, 0);变换:翻译(0, 0)；}

Plnkr

从 doc

中找到了这个<块引用>

请记住，默认情况下，如果动画正在运行，则在父元素的动画完成之前，无法对任何子元素进行动画处理.可以通过将 ng-animate-children 属性放在父容器标记上来覆盖此阻止功能.

即使父重复上没有动画，ng-animate 似乎只是忽略了其子上的任何进一步动画.

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屋！