Angularjs - 重复的元素的儿童动画 [英] Angularjs - animating children of repeated elements

问题描述

友

我撞我的头对这个问题，我希望你能帮助我。我试图动画重复的元素的孩子angularjs 1.2rc1（也许这种情况已经改变？），或多或少是这样的：

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

这不工作，和角度不承认元素被动画。如果我直接分配过渡到动画排元素（而不是其子），那么我不能不是重复无论在父母和孩子的转换其它CSS选择器的任意组合动画的孩子，但是这似乎并没有被工作在FF。

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,

拉​​斐尔Pólit

推荐答案

您需要直接有你想要的动画元素上的转换。在你的情况下，检查是否 .animated行.animated孩子的转换，它没有。 .animated-row.ng进入＆GT; .animated孩子和 .animated-row.ng休假＆GT; .animated孩子有动画。删除 .ng进入和 .ng休假从选择，使其。动画排.animated孩子

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

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

更新结果
进一步调查后，为什么进入作品的原因是多还是少意外，动画类 NG-休假和 NG-输入以及 NG-移动添加到父类，一旦动画/过渡完成​​删除。因为没有施加到母过渡，这意味着它是或多或少瞬间。添加转换（即使你不改变任何属性）应该欺骗ngAnimate离开类父给孩子足够的时间做它的东西。

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.

通过添加和删除： 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屋！