title: Hide/Show animations on ngShow
body: <p>I'm trying to do some sort of presentation with AngularJS and I wanted to use the power of ngAnimation which, so far, has been massively hard.</p>
  
  <p>I've been able to use <code>fadeIn</code> and <code>fadeOut</code> with CSS Transitions without much issue but right now, I'm stuck trying to work this out.</p>
  
  <p>I want text to come from above, and when the next "slide" comes, current text should <code>fadeOutDown</code> and next text should <code>fadeInDown</code> as the previous one.</p>
  
  <p>So, the classes should be like this:</p>
  
  <pre><code>.animation-fadeInDown-fadeOutDown.ng-hide-add,
  .animation-fadeInDown-fadeOutDown.ng-hide-remove {
      display: table-cell !important;
  }
  
  .animation-fadeInDown-fadeOutDown.ng-hide-add {
      animation-duration: 1.5s;
      animation-name: fadeOutDown;
  }
  
  .animation-fadeInDown-fadeOutDown.ng-hide-remove {
      animation-delay: 10s;
      animation-duration: 1.5s;
      animation-name: fadeInDown;
  }
  </code></pre>
  
  <p>What actually happens is that the two animations end up overlapping and shown incorrectly. I've prepared a <a href="http://plnkr.co/edit/dyzxT5Ev9GBq0AOGRR8S?p=preview" rel="nofollow">plunk</a> with some boilerplate code that will show the problem as it is now. And you'll soon realize what's going on.</p>
  
  <p>What am I doing wrong?</p>