Animations in AngularJS ng-show
angularjs, javascript, ng-animate
Solution
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.
Problem
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?