2

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.

Vivendi
  • 20,047
  • 25
  • 121
  • 196

2 Answers2

1

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

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
0

From the angular documents for ng-show:

The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.

If you want to dynamically add / remove a class, you should use ng-class.

Sam Dufel
  • 17,560
  • 3
  • 48
  • 51
  • I was under the impression that `ng-show` automatically added `ng-show` or `ng-hide` to an element. But I guess I was wrong. I updated my Plunker by adding the `ng-class` directive. It now has the `ng-show` class when I press on the link. But the animation still doesn't play – Vivendi Jul 11 '14 at 20:52
  • In that case, it would seem to be an issue with your css. – Sam Dufel Jul 11 '14 at 20:53
  • Yeh, but it works fine for a `ng-include` (see updated plunker). I don't see why this wouldn't work for a `ng-show`. – Vivendi Jul 11 '14 at 21:05