我不明白为什么回调被立即调用,没有任何延迟,我已经阅读了文档,它说它解析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%; }
}
解决方法
@H_301_26@ 我认为你不以正确的方式使用回调,addClass返回promise,而不是输入param with function.你应该像这样,在纯粹的js中：
scope.$watch('slide.animation',function(newValue,oldValue) {
return $animate.addClass(element,'enter-right').then(function() {
return console.log('Animation ended!');
});
});
建议：将动画持续时间增加到10秒,打开控制台,查找动画元素,并查看动画期间如何应用类.
