title: Animations in AngularJS ng-show
body: <p>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.</p>
  
  <p>I found this example: <a href="http://jsfiddle.net/Kx4TS/1/" rel="noreferrer">http://jsfiddle.net/Kx4TS/1/</a>
  which works fine.</p>
  
  <p>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?</p>
  
  <p>my code looks like this:</p>
  
  <pre><code>   &lt;div style="" ng-show="item.hasMax()" 
       class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}"&gt;
  </code></pre>
  
  <p>and the css is:</p>
  
  <pre><code>    .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;
      }
  </code></pre>
  
  <p>Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?</p>