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