angularjs之ngAnimate，addClass 回调在动画结束后不运行

我不明白为什么回调会立即被调用，没有任何延迟，我读过文档，它说它解析 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%; } 
} 

请您参考如下方法:

我认为你没有以正确的方式使用回调，addClass返回promise，而不是使用函数输入参数。你应该有这样的东西， 纯js:

scope.$watch('slide.animation', function(newValue, oldValue) { 
  return $animate.addClass(element, 'enter-right').then(function() { 
    return console.log('Animation ended!'); 
  }); 
}); 

建议:将动画持续时间增加到 10 秒，打开控制台，找到动画元素并查看动画期间如何应用类。