Search code examples
angularjsng-animateng-showng-hide

ngShow doesn't add ng-show class

I'm trying to create an animation for an element that is initially hidden by a ng-show="boolDefaultIsFalse" attribute.

When I trigger the boolean to be true then the element is shown, but the animation doesn't play.

This is because the element never gets the ng-show class. It does start with a ng-hide class. But as soon as I show the element then that class is removed and no new ones are added.

Here's a demo of my problem: http://plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05

Anyone any idea how to solve this problem?

Update

I've updated the Plunker.

I added the ng-class directive to add the ng-show class manually to the div. But the animation still doesn't play.

Solution

  • When you include ngAnimate as a dependency of your module:

    var app = angular('app', ['ngAnimate']);

    Angular will automatically add/remove the following CSS classes when the ng-show/ng-hide directives are applied:

    ng-hide-add
    ng-hide-add-active
    ng-hide-remove
    ng-hide-remove-active

    To take advantage of this, add your CSS animation styles to these classes.

    Here is an Demo