How to animate child elements when ngClass changes on parent

Question

Is it possible to define transitions on child elements and have ngAnimate taken them into account when ngClass changes for parent elements?

So far I haven't been able to do this.
http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview

Thanks.

Answer 1

I don't think it is possible the way you are trying to do it. Angular is looking for animation/transition properties on the base class to determine timing. But in your case you all these properties is defined on child element. So as the result Angular can't wire up necessary animation hooks.

What you can do is to provide a hint for Angular when animation steps should be performed. Like this:

.container {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

This is just duplicated transition styles which tell Angular everything it needs about your transition.

Demo plunk.

Looks like providing transition-duration: 1s is only important part here, so it can be:

.container {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}