title: Animate Angular-flash Alerts
body: <p>Using the package, <a href="https://sachinchoolur.github.io/angular-flash/" rel="nofollow noreferrer">Angular-flash</a> and having issues adding custom animations to the showing and hiding of an alert. </p>
  
  <p>From the docs</p>
  
  <blockquote>
    <p>If you want to use animations, include ngAnimate module. You can then
    use regular Angular animation technique for applying your own
    transitions.</p>
  </blockquote>
  
  <pre><code>.alert {...}
  .alert.ng-enter, .alert.ng-enter.ng-enter-active {...}
  .alert.ng-leave, .alert.ng-leave.ng-leave-active {...}
  </code></pre>
  
  <p>I feel like I've tried all possible combinations but struggle to get the in . out effects.</p>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>    &lt;flash-message&gt;
          &lt;div&gt;{{ flash.text }}&lt;/div&gt;
      &lt;/flash-message&gt;
  
      &lt;button ng-click="showFlash()"&gt;PRESS ME&lt;/button&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>$scope.showFlash = function() {
      var message = '&lt;strong&gt;Hello!&lt;/strong&gt; ';
      var id = Flash.create('info', message, 4000, false);
  };
  </code></pre>
  
  <p>Just to test my CSS animation is working I just added an animation to the alert class. This provides the show animation only. </p>
  
  <pre><code>.alert {
      animation: 1.5s zoomIn ease;
  } 
  </code></pre>
  
  <p>I need to be able to attach it to the "Alert Show Event" and then attach a zoom out to the "Alert Hide Event", allowing a specific show and hide effect.</p>
  
  <p>I've tried these in multiple combinations but struggle to find what class to associate with the show / hide animations.</p>
  
  <pre><code>.alertIn, 
  .alertOut
  .alert.ng-hide-add-active
  .alert.ng-hide-remove-active
  </code></pre>
  
  <p>Thanks</p>