9

朋友们，

我正在为这个问题打我的头，我希望你能帮助我。我正在尝试使用 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上。

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

感谢您的任何意见！最好的祝福，

拉斐尔·波利特

4

1 回答 1

9

您需要直接在要设置动画的元素上进行转换。在您的情况下，它正在检查是否.animated-row .animated-child有转换，但它没有。 .animated-row.ng-enter > .animated-child并.animated-row.ng-leave > .animated-child有动画。从该选择器中删除.ng-enterand.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;
}

父级和子级现在具有过渡属性。

于 2013-10-01T20:48:24.553 回答