Angularjs - 为重复元素的子元素设置动画 [英] Angularjs - animating children of repeated elements

问题描述

朋友们，

我正在纠结这个问题，希望你能帮助我.我正在尝试使用 angularjs 1.2rc1 为重复元素的子元素设置动画(也许这已经改变了?)，或多或少是这样的:

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

.animated-row {溢出:隐藏；}.animated-row .animated-child {位置:相对；}.animated-row.ng-enter >.animated-child，.animated-row.ng-leave >.animated-child {-webkit-transition:1s 线性全部；-moz-transition:1s 线性全部；-ms-transition:1s 线性全部；-o-transition:1s 线性全部；过渡:1s 线性全部；}.animated-row.ng-enter .animated-child,.animated-row.ng-leave.ng-leave-active .animated-child {不透明度:0;右:-25%；}.animated-row.ng-leave .animated-child,.animated-row.ng-enter.ng-enter-active .animated-child {不透明度:1；正确:0%；}

这不起作用，并且 angular 无法将元素识别为动画.如果我将过渡直接分配给动画行元素(而不是它的子元素)，那么除了在父元素和子元素上重复过渡之外，我无法使用任何 css 选择器组合为子元素设置动画，但这似乎不起作用在 FF.

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

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

拉斐尔·波利特

解决方案

您需要直接在要设置动画的元素上进行过渡.在您的情况下，它正在检查 .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 线性全部；-moz-transition:1s 线性全部；-ms-transition:1s 线性全部；-o-transition:1s 线性全部；过渡:1s 线性全部；}

小提琴: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 线性全部；-moz-transition:1s 线性全部；-ms-transition:1s 线性全部；-o-transition:1s 线性全部；过渡:1s 线性全部；}

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

Friends,

I'm banging my head about this issue, I was hoping you can help me. I'm trying to animate the child of a repeated element with angularjs 1.2rc1 (perhaps this has changed?), more or less like this:

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

What I want is to animate the child to move inside the repeated row on enter and leave. Therefore, I have tried, as per the documentation, a selector like this:

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

This doesn't work, and angular does not recognize the element as being animated. If I assign the transitions directly to the animated-row element (not its child), then I cannot animate the child with any combination of css selectors other than repeating the transitions both on parent AND child, but this doesn't appear to be working on FF.

Any ideas? Perhaps I'm missing something obvious, but I cannot seem to get the answer.

Thanks for any input! Best regards,

Rafael Pólit

解决方案

You need to have your transitions directly on the element that you want to animate. In your case, it is checking to see if .animated-row .animated-child has transitions, which it does not. .animated-row.ng-enter > .animated-child and .animated-row.ng-leave > .animated-child have the animations. Remove the .ng-enter and .ng-leave from that selector to make it .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;
}

Fiddle: http://jsfiddle.net/TheSharpieOne/Y9tE6/1/

UPDATE
After further investigating, the reason why the enter works is more or less by accident, the animation classes ng-leave and ng-enter as well as ng-move are added to the parent class and removed once the animation/transition is done. Because there is no transition applied to the parent, that means it is more or less instant. Adding a transition (even if you don't change any properties) should trick ngAnimate to leave the classes on the parent giving the child enough time to do its thing.

With Add and Remove: 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;
}

The parent and the child now have the transition properties.

这篇关于Angularjs - 为重复元素的子元素设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！