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?

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?

• javascript
• jquery
• angularjs
• animation
• ng-animate

Share Improve this question Follow edited Feb 17, 2014 at 16:40 deadconversations asked Feb 17, 2014 at 15:56 deadconversationsdeadconversations 1,93722 gold badges1313 silver badges1414 bronze badges 3

• 1 Can you share your HTML? – Brett DeWoody Commented Feb 19, 2014 at 21:46
• have you tried .child.ng-hide-remove and .child.ng-hide-add instead of just having .child? – V31 Commented Feb 24, 2014 at 12:18
• Yes I have, didn't work. – deadconversations Commented Feb 25, 2014 at 10:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.