javascript - Angular JS 动画没有调用 beforeAddClass

Question

我正在尝试使用 AngJS 1.2.15 创建动画

我已经定义了一个指令，其目的是创建一个 post 元素并将 showAnswer 布尔值传递给该元素。

并创建了一个动画模块，如果将答案类添加/删除到 post 元素，它会在该模块上进行动画处理。

如果 showAnswer 是真/假，取决于 mouseenter/mouseleave，则 HTML 通过将答案作为一个类分配/删除来将两者绑定在一起。

的HTML

<div ng-controller='MainCtrl'>

  <post class="boxWrapper answer-animation"
    ng-class="{'answer':showAnswer}"
    ng-repeat='q in questions'
    ng-mouseenter='showAnswer = true'
    ng-mouseleave='showAnswer = false'>


    <div class = 'box'>
      <div class="front jumbotron"><h1>{{q.question}}</h1></div>
      <div class="back jumbotron"><h1>{{q.answer}}</h1></div>
    </div>

  </post>
</div>

模块

app.directive('post', function() {


var controller = function($scope) {
    $scope.showAnswer = false;
  };

  return {
    restrict: 'E',
    scope: true,
    controller: controller
  }
});

app.animation('.answer-animation', function(){
  return {
    beforeAddClass: function(element, className, done){
      if (className == 'answer') {

        console.log('I am Called - ADD');

        }
      else {
        done();
      }
    },

    beforeRemoveClass: function(element, className, done) {
      if (className == 'answer') {

        console.log('I am Called - REMOVE');

        }
      else {
        done();
      }
    }
  };

});

现在我已经输入了 console.logs 来显示我期望发生的事情，但是这些日志从未被调用，这意味着 beforeAddClass 和 beforeRemoveClass 从未被调用，即使我可以清楚地看到答案类被添加到元素中！：（ 卡住！