angularjs - ngAnimate、アニメーションの終了後に addClass コールバックが実行されない

Question

コールバックが遅延なしですぐに呼び出される理由がわかりません。cssを解析して遷移期間を取得すると書かれているドキュメントを読みました。

しかし、うまくいかないようです。ここに私のコードがあります：

これは私のスライドディレクティブです:

'use strict'

class SlideController
  constructor: ($log, $scope) ->
    console.log 'controller init.'


class Slide
  constructor: ($log,$animate) ->
    link = (scope, element, attrs) =>
      scope.$watch 'slide.animation', (newValue,oldValue)->
        $animate.addClass element,'enter-right',()->
          console.log 'Animation ended!'



    return {
    link
    controller: ['$log', '$scope', SlideController]
    replace: true
    restrict: 'E'
    scope:
      slide: '='
    templateUrl: '/views/directives/postSlide.html'
    transclude: true
    }

angular.module('app').directive 'postSlide', ['$log','$animate', Slide]

ここに私のcssがあります：

.post-slide.enter-left, .post-slide.leave-left, .post-slide.enter-right, .post-slide.leave-right{
  position:absolute;
  left:0px;
  top:0px;
}

/**
  Enter/leave right
**/
.post-slide.enter-right {
  -webkit-animation:0.5s enter-right;
  animation:0.5s enter-right;
  z-index:100;
  background-color:darkgreen;

}

.post-slide.leave-right {
  -webkit-animation:0.5s leave-right;
  animation:0.5s leave-right;
  z-index:10;
  background-color:darkred;
}

@keyframes enter-right {
  from { left:100%; }
  to { left:0; }
}

@-webkit-keyframes enter-right {
  from { left:100%; }
  to { left:0; }
}

@keyframes leave-right {
  from { left:0; }
  to { left:-100%; }
}

@-webkit-keyframes leave-right {
  from { left:0; }
  to { left:-100%; }
}