title: Animating showing/hiding Ui Bootstrap alert in Modal window AngularJS
body: <p>I'm trying to animate an ng-hide that I use on an Ui Bootstrap alert button in a Ui Bootstrap Modal window. I want the animation to slide the alert in and out, and to fade it in and out at the same time.</p>
  
  <p>The alert is showing and hiding properly, but the hiding/showing animation is not working at all, and is totally baffling me.</p>
  
  <p>The show-hide code is: </p>
  
  <pre><code>&lt;alert type="danger" close="hideAlert = true"
      ng-hide="hideAlert" class="ng-hide"&gt;ERROR!&lt;/alert&gt;
  </code></pre>
  
  <p>The CSS for the animation (which is probably totally incorrect...) is:</p>
  
  <pre><code>.alert.ng-hide-add,
  .alert.ng-hide-remove {
  
      -moz-transition: 0.5s linear all;
      -o-transition: 0.5s linear all;
      -webkit-transition: 0.5s linear all;
      transition: 0.5s linear all;
  
      display: block !important;
      opacity: 1;
      max-height:50px;
  }
  
  
  .alert.ng-hide {
      opacity: 0;
      max-height:0px;
  }
  </code></pre>
  
  <p>I've included a PLNKR here to show it in all it's infamy: <a href="http://plnkr.co/edit/rQ27FDLHapOTadPJuz6z" rel="nofollow">http://plnkr.co/edit/rQ27FDLHapOTadPJuz6z</a></p>
  
  <p>Please help....</p>