title: Angular: ng-if animation not working on directive
body: <p>I'm using Angular 1.3 and <a href="https://daneden.github.io/animate.css/" rel="nofollow">animate.css</a>.</p>
  
  <p>I'm trying to apply a simple fadeIn/out animation on a directive i have using this code:</p>
  
  <pre><code>.vl-fade-in-out{
      &amp;.ng-enter{
          animation: fadeIn 1s;
      }
  
      &amp;.ng-leave{
          animation:  fadeOut 1s;
      }
  
  }
  </code></pre>
  
  <p>But no animation is applied, however, the same animation does apply if i use it directly on a html element (like div).</p>
  
  <pre><code>//this is not animating
  &lt;my-directive class="vl-fade-in-out" ng-if="show"&gt;&lt;/my-directive&gt;
  //this is animating
  &lt;div class="vl-fade-in-out" ng-if="show"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Also if i apply fadeIn/out effect using transition it works even when applied on the directive:</p>
  
  <pre><code>.vl-fade-in-out{
      &amp;.ng-enter{
          transition:1s linear all;
          opacity: 0;
  
          &amp;.ng-enter-active{
              opacity: 1;
          }
      }
  
      &amp;.ng-leave{
              transition:1s linear all;
              opacity: 1;
          &amp;.ng-leave-active{
              opacity: 0;
          }
      }
  
  
  }
  </code></pre>
  
  <p>Am I doing something wrong?</p>
  
  <p>Pen: <a href="http://codepen.io/anon/pen/aOLzGE" rel="nofollow">http://codepen.io/anon/pen/aOLzGE</a></p>