如何在指令中调用基于Javascript的动画

Question

如何在我的指令中调用基于Javascript的动画？我在这里有我的代码，但是当我添加类＆＃34;打开＆＃34;单击子时父元素，它不起作用。它似乎甚至没有达到我的动画功能

//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');
            }
        });
    }
}
}])

<div class="dropSelect">
  <div class="car" animate-drop-select>
    <!--options-->
  </div>
</div>

<div class="dropSelect">
  <div class="bus" animate-drop-select>
    <!--options-->
  </div>
</div>