Angularjs - animating children of repeated elements

Question

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

Amritsar

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

Desrosiers

Thanks a lot for the answer. Makes a lot of sense! The problem now arises upon removal. I have updated the jsfiddle to include a remove option. Why is it not doing the reverse procedure? Here's the fiddle: jsfiddle.net/XkQV7 Thanks again, Rafa. – Herbert

Updated post. Now I understand more of why its doing what its doing. – Desrosiers

Thanks a lot Sharpie... With all your input during the first time, I had actually arrived to the same solution what I was hesitant as some of those solutions in the past had let me with some double-animations (always using ng-enter and leave). Without it though, it works perfectly. Thanks for all your time and help! It is much appreciated and, of course, your answer is now marked as such. Thanks again. Rafa. – Herbert

Incredible! Sharpie, you saved me. – Discriminative