不能错开 ngAnimate 子动画答案

【问题标题】：Can't stagger ngAnimate child animations不能错开 ngAnimate 子动画
【发布时间】：2016-09-19 07:12:15
【问题描述】：

我正在尝试使用以下 HTML 错开 ngRepeat div 的子元素的动画。

  <strong>This staggers</strong>
  <div ng-repeat="item in items" class="animate-stagger container" ng-animate-children="true">
    <div>{{item}}</div>
  </div>

  <strong>This doesn't stagger</strong>
  <div ng-repeat="item in items" class="animate-child-stagger container" ng-animate-children="true">
    <div>{{item}}</div>
  </div>

我可以使用 CSS 成功地为 ngRepeat div 交错动画：

.animate-stagger{
  animation-duration: 2s;
}

.animate-stagger.ng-enter-active {
     animation-name: slide;
     transform: scaleX(0);
}

.animate-stagger.ng-enter-stagger  {
  animation-delay: 1s;
  animation-duration: 0s;
}

我可以为子 div 设置动画，但它不会使用 CSS 交错：

.animate-child-stagger {
  animation-duration: 2s;
}

.animate-child-stagger.ng-enter-active div  {
     animation: slide 2s;
     transform: scaleX(0);
}

.animate-child-stagger.ng-enter-stagger div {
  animation-delay: 1s;
  animation-duration: 0s;
}

有没有一种方法可以使用 CSS 和 ngAnimate 错开子动画？

示例插件： http://plnkr.co/edit/08TviNqVUTkGCnLNDKdp?p=preview

【问题讨论】：

标签： css angularjs animation css-animations ng-animate

【解决方案1】：

我能够通过对父元素应用动画延迟来完成这项工作（即使它是动画的子元素）。

.animate-stagger-child {
  animation-duration: 2s; 
}

.animate-stagger-child.ng-enter-active div  {
     animation: slide 2s;
     transform: scaleX(0);
}

.animate-stagger-child.ng-enter-stagger {
  animation-delay: 1s;
  animation-duration: 0s;
}

【讨论】：