ngAnimate on ngShow not working

Question

I am trying to execute a animated menu using ngAnimate.

home.html

<div id="left-menu" ng-hide="showMenu">
    <div class="wrapmenu">
      Menu
    </div>

</div>

<div id="content-wrapper" ng-show="showMenu" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
  <button id="menu" ng-click="showMenu = !showMenu"></button>
</div>

Style.css

.fadeIn-setup,.fadeOut-setup {
    -webkit-transition: 1s linear opacity;
    -moz-transition: 1s linear opacity;
    -o-transition: 1s linear opacity;
    transition: 1s linear opacity;
}
.fadeIn-setup{
    opacity:0;
}
.fadeOut-setup{
    opacity:1;
}
.fadeIn-setup.fadeIn-start {
    opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

ngShow and Hide works well. But the animation is not triggered.

I have updated to Angular 1.1.5. I find from the angular documents, there has been a change of syntax for CSS

I have also tried the new syntax with the same results.

Any help is appreciated.

Could you add your code to [jsbin](http://jsbin.com/)? – Tim B James Aug 23 '13 at 10:05 — Tim B James, Aug 23 '13 at 10:05

JQuery Guru · Answer 1 · 2013-08-23T10:34:20.690

2

Below is the working example in 1.1.5 :

http://jsfiddle.net/ncapito/CTfL8/

 <button ng-click="toggle = !toggle">Toggle!</button>

  <div class="box on" ng-show="toggle" ng-animate="{show:'list-show', hide:'list-hide'}">On</div>
  <div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>

edited Aug 23 '13 at 10:34

answered Aug 23 '13 at 10:29

JQuery Guru

6,943
1
33
40

1

Thnx. So ng-animate has to work along with TweenMax lib for css animation? Or is it possible to do the same with just ng-animate and seen on nganimate examples? – de-bugged Aug 25 '13 at 11:45

score 0 · Answer 2 · answered Aug 28 '13 at 06:28

Loads of changes from 1.1.5 to 1.2. So moved my code into 1.2. Animation is much more streamlined.

followed this example for animation.

Sadly Angular documentation for animation is almost nil. YearOfMoo has some good documentation on animation on latest Angular

ngAnimate on ngShow not working

2 Answers2