Angular JS 1.2 - animating child elements with ng-show

Question

Dearest stackoverflowers,

I'm new to Angular JS and have read some stuff on how to animate the Angular way, still I'm very much confused on how to correctly implement it and what classes get added when and where. I feel like I had much more control over my animations with traditional jQuery (adding and removing classes). But maybe this is just because I'm used to it that way.

On pageload I want certain elements to animate in. So in my controller, on pageload, a variable (pageLoaded) gets set to true. And my surrounding content-wrapping div will have ng-show="pageLoaded".

This way I have successfully added an animation on the entire page using following CSS transitions/animations:

.page.ng-hide-add, .page.ng-hide-remove {
    display:block!important;
}

.popup.ng-hide-add  {
    -webkit-animation: 450ms bounceInRight reverse;
}

.popup.ng-hide-remove {
    -webkit-transform: translateX(100%);
    -webkit-animation: 750ms bounceInRight;
}

But once I try to address child elements, the animations fail.

.page.ng-hide-add .child, .page.ng-hide-remove .child {
    display:block!important;
}

.popup.ng-hide-add .child {
    -webkit-animation: 450ms bounceInRight reverse;
}

.popup.ng-hide-remove .child {
    -webkit-transform: translateX(100%);
    -webkit-animation: 750ms bounceInRight;
}

Is this not supported by Angular? Or am I doing something wrong?

And if I understand correctly, no matter if you're using ng-hide, or ng-show.. the ng-hide classes should be used? Where they follow following logic:

• ng-hide-remove/ng-hide-remove-active show the element
• ng-hide-add/ng-hide-add-active hide the element

Can someone explain the difference between the regular and the active classes? How should they be used?

Answer 1

It seems that Angular scans the document for things to animate, I have found that when wanting to animate a child element. You have to set a transition on the parent for as long as you want the children to transition.

For example.

.page.ng-hide-add, .page.ng-hide-remove {
   -webkit-transition: 1000ms;
}

.page.ng-hide-add .child, .page.ng-hide-remove .child {
    display:block!important;
}

.popup.ng-hide-add .child h1 {
    -webkit-animation: 450ms bounceInRight;
}

.popup.ng-hide-add .child h2 {
    -webkit-animation: 750ms bounceInRight 250ms;
}

Angular will only add the 'animation' classes, if the HTML element with the NG-IF/NG-SHOW or ng-whatever element has a transition in the CSS specified for it.