title: How to call Javascript based Animation in Directive
body: <p>How can I call Javascript based animation in my directive? I have my code here but it seems when I add class "open" to the <strong>parent</strong> element on click of the <strong>child</strong> it does not work. It does not even seem to reach my animate function</p>
  
  <pre><code>//Animate
  angular.module('createAnimate', ['ngAnimate']).
  animation('.dropSelect', [function(){
    return {
      addClass: function(element, className, doneFn){
        console.log(className);
        if (className == 'open') {
          //animate open
        } else if (className == 'closed') {
          //animate close
        }
      }
    }
  }]);
  
  //Directive
  directive('animateDropSelect', ['$animate', function($animate) {
  return {
      restrict: 'A',
      link: function($scope, element, attrs) {
          element.on('click', function() {
              var $selectMenu = element.parent();
              if ($selectMenu.hasClass('open')) {
                  $selectMenu.removeClass('open').addClass('closed');
                  $animate.addClass($selectMenu, 'closed');
              } else {
                  $selectMenu.removeClass('closed').addClass('open');
                  $animate.addClass($selectMenu, 'open');
              }
          });
      }
  }
  }])
  
  &lt;div class="dropSelect"&gt;
    &lt;div class="car" animate-drop-select&gt;
      &lt;!--options--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dropSelect"&gt;
    &lt;div class="bus" animate-drop-select&gt;
      &lt;!--options--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>