title: AngularJS $animate.enter not adding ng-enter and ng-enter-active classes
body: <p>I'm trying to incorporate the <code>$animate</code> service into my own directive.  I can't get enter and leave to actually animate.</p>
  
  <p>The weird thing is that using <code>$animate.enter</code>, the element is appended to the DOM, and the callback function fires.  But it seems as though the <code>ng-animate</code>, <code>ng-enter</code>, and <code>ng-enter-active</code> classes never get added.  The element is simply appended to the DOM without animation.  The callback function fires, but it fires instantly and not after the duration of the animation that's supposed to happen.  The same thing happens with <code>leave</code>; the element is removed from the DOM instantly, and the callback fires instantly; no animation.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;$animate.enter&lt;/title&gt;
      &lt;script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular-animate.js" data-semver="1.2.5"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" charset="utf-8"&gt;
          var app = angular.module('TestAnimation', []);
  
          app.controller('TestAnimation', function($scope) {
          });
  
          app.directive("appendaroo", function($animate, $compile) {
            function link(scope, element, attr) {
              var isAppended = false;
              var parent = element.parent();
              var box;
              element.on('click', function() {
                isAppended = !isAppended;
                if (isAppended) {
                  box = angular.element('&lt;div class="rect"&gt;&lt;/div&gt;');
                  $animate.enter(box, parent, element, function() {
                    console.log("Done entering");
                  });
                } else {
                  $animate.leave(box, function() {
                    console.log("Done leaving");
                  });
                }
              });
            }
            return {
              link: link
            };
          });
      &lt;/script&gt;
  
      &lt;style type="text/css" media="screen"&gt;
          .rect {
              width: 100px;
              height: 100px;
              background-color: #ff9933;
              transition: all 1s ease-out;
          }
          .rect.ng-enter,
          .rect.ng-leave.ng-leave-active {
              opacity: 0;
          }
          .rect.ng-enter.ng-enter-active,
          .rect.ng-leave {
              opacity: 1;
          }
      &lt;/style&gt;
  
    &lt;/head&gt;
  
    &lt;body ng-controller="TestAnimation" ng-app="TestAnimation"&gt;
        &lt;button appendaroo&gt;Fade in/out&lt;/button&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm rather new to Angular and I figure I'm just missing something, so apologies if this is a crazy stupid question.  But there don't seem to be a lot of resources available for utilizing <code>$animate</code> in your own directives.</p>
  
  <p>I am able to use <code>$animate.addClass</code> and <code>$animate.removeClass</code> without problem, which is helpful, and suggests that I'm on the right track, but <code>enter</code> and <code>leave</code> are giving me problems.</p>
  
  <p>I put the example on Punker:</p>
  
  <p><a href="http://plnkr.co/edit/XtvZAZzgA8ORZBaRN68d?p=preview" rel="noreferrer">http://plnkr.co/edit/XtvZAZzgA8ORZBaRN68d?p=preview</a></p>