javascript - Angular JS アニメーションが beforeAddClass を呼び出さない

Question

AngJS 1.2.15 を使用してアニメーションを作成しようとしています

post 要素を作成し、showAnswer ブール値を要素に渡すことを目的とするディレクティブを定義しました。

また、回答クラスが投稿要素に追加/削除された場合にアニメーション化するアニメーション モジュールを作成しました。

showAnswer が mouseenter/mouseleave に依存する true/false である場合、HTML はクラスとして answer を割り当て/削除することによって 2 つをバインドします。

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 を入れましたが、これらのログは決して呼び出されません。：（ 立ち往生！