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。

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

感谢任何输入！最好的问候，

RafaelPólit

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

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

Angularjs - 重复元素的儿童动画

1 个答案: