Angularjs - animating children of repeated elements

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/19123563/angularjs-animating-children-of-repeated-elements

标签

angularjs

animation

jquery-animate

ng-repeat

ng-animate