ngAnimate, addClass callback не запускается после окончания анимации

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%; } 
} 

Answer 1

Я думаю, вы не используете обратный вызов надлежащим образом, addClass возвращает обещание, а не вводит параметр с функцией. Вы должны иметь это как-л, в чистом JS:

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

Совет: Увеличение продолжительности анимации на 10с, открытой консоли, найти анимированные элементы и посмотреть, как классы применяется во время анимации.