Angularjs - 动画重复元素的孩子

Question

朋友们，

我正在为这个问题头疼，我希望你能帮助我。我正在尝试使用 angularjs 1.2rc1 为重复元素的子元素设置动画（也许这已经改变了？），或多或少像这样：

<div ng-repeat="row in rows" class="animated-row>
  <div class="animated-child">Row content</div>
</div>

我想要的是让孩子在进入和离开的重复行内移动。因此，根据文档，我尝试了这样的选择器：

.animated-row {
  overflow: hidden;
}

.animated-row .animated-child {
  position: relative;
}

.animated-row.ng-enter > .animated-child,
.animated-row.ng-leave > .animated-child {
  -webkit-transition: 1s linear all;
  -moz-transition: 1s linear all;
  -ms-transition: 1s linear all;
  -o-transition: 1s linear all;
  transition: 1s linear all;
}

.animated-row.ng-enter .animated-child,
.animated-row.ng-leave.ng-leave-active .animated-child {
  opacity:0;
  right:-25%;
}

.animated-row.ng-leave .animated-child,
.animated-row.ng-enter.ng-enter-active .animated-child {
  opacity:1;
  right:0%;
}

这不起作用，并且 Angular 无法将元素识别为动画。如果我将转换直接分配给动画行元素（不是它的子元素），那么除了在父子和子元素上重复转换之外，我无法使用任何 CSS 选择器组合为子元素设置动画，但这似乎不起作用在 FF 上。

有什么想法吗？也许我遗漏了一些明显的东西，但我似乎无法得到答案。

感谢您的任何意见！ 最好的问候，

拉斐尔·波利特

Answer 1

您需要直接在要设置动画的元素上进行转换。在您的情况下，它正在检查 .animated-row .animated-child 是否有转换，但它没有。 .animated-row.ng-enter > .animated-child 和 .animated-row.ng-leave > .animated-child 有动画。从该选择器中删除 .ng-enter 和 .ng-leave 使其成为 .animated-row .animated-child

.animated-row .animated-child{
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}

小提琴：http://jsfiddle.net/TheSharpieOne/Y9tE6/1/

更新
经过进一步调查，进入作品的原因或多或少是偶然的，动画类ng-leave和ng-enter以及ng-move被添加到父类中，并在动画/过渡完成后删除。因为没有应用于父级的过渡，这意味着它或多或少是即时的。添加transition（即使您不更改任何属性）应该会欺骗 ngAnimate 将类留在父级上，从而给子级足够的时间来做它的事情。

添加和删除：http://jsfiddle.net/TheSharpieOne/XkQV7/1/

.animated-row, .animated-row .animated-child{
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}

父母和孩子现在有了过渡属性。