Angularjs – animating children of repeated elements

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply