title: AngularJS $animate.addClass is not firing the addClass function
body: <p>I have a couple of instances where I am performing animation with Angular.</p>
  
  <p>They are both almost identical - yet one works,and the other doesn't - I can't figure out by the second one doesn't.</p>
  
  <p><strong>The following, is the directive that DOES work:</strong> - It essentially animates a bunch of child elements within the <code>element</code></p>
  
  <pre><code>    dwApp.directive('introText', ['$animate', '$rootScope', function ($animate, $rootScope) {
  
      return {
          restrict: 'A',
          scope: {            
          },
          link: function (scope, element, attrs) {
  
              scope.animationStarted = false;
  
              $rootScope.$on('element-in-view', function (event, parent) {               
                  if (!scope.animationStarted) {
                      scope.animationStarted = true;
                      $animate.addClass(element, 'slidein');
                  };
              });
          }
      }
  
  }]);
  
  
  dwApp.animation('.slidein', function () {
  
      return {
          addClass: function (element, className) {
              TweenMax.staggerTo(element.children(), 2.8, { opacity: 0.85, left: '5%', ease: Circ.easeOut }, 3);  
          }
      }
  
  });
  </code></pre>
  
  <p><strong>The following, is the directive that does NOT work</strong> - the console logging shows that it all works, right up to <code>console.log('performing animation');</code> - telling me that the function is just not being fired, and i have no idea why...</p>
  
  <p><strong>HTML is simply</strong></p>
  
  <p><code>&lt;mask&gt;&lt;/mask&gt;</code></p>
  
  <pre><code>dwApp.directive('mask', ['$animate', '$rootScope', function ($animate, $rootScope) {
  
      return {
          restrict: 'E',
          link: function (scope, element, attrs) {
  
              console.log('mask directive')
  
              $rootScope.showMask = function () {
                  console.log('showMask called - add class')
                  $animate.addClass(element, 'showmask');
              };          
  
              // test
              $rootScope.showMask();
          }
      }
  
  }]);
  
  
  dwApp.animation('.showmask', function () {
      console.log('in showmask animation service');
      return {
          addClass: function (element, className) {
              console.log('performing animation');
              TweenMax.to(element, 1, { opacity: 1 });
          }
      }
  
  });
  </code></pre>
  
  <p>When viewing the HTML source after <code>$rootScope.showMask()</code> has been called I can see that the mask now has the class</p>
  
  <pre><code>&lt;mask class="showmask"&gt;&lt;/mask&gt;
  </code></pre>
  
  <p>Does anybody have any idea where i am going wrong?</p>