Animations in AngularJS ng-show

Question

I'm trying to get an ng-show element to animate when it becomes visible/hidden. But it just acts like a normal ng-show, instand show/hide.

I found this example: http://jsfiddle.net/Kx4TS/1/ which works fine.

yet, if I use the same ng-animate attribute and the same css, it doesn't work in my case. Is there anything else I need to do or cases where animations won't work?

my code looks like this:

   <div style="" ng-show="item.hasMax()" 
     class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">

and the css is:

    .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;
    }

Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?

Answer 1

The fiddle example uses Angular version 1.1.4. Make sure you also have a newer version of angular available. I suggest you get the latest version. Right now it is the 1.1.5, which has some important bug fixes.

Answer 2

The animation approach changed with Angular 1.2. Here's an article ( year of moo post ) that explains the differences. It's much simpler now - doesn't require ng-animate.