检测JQuery动画的结尾

Question

我有一个工作的Jquery动画，如下所示：

const e = $("#span-7");
e.css({fill: "#4287f5", transition: "0.5s"});

如何检测动画的结尾？

我试过了，但没有成功！

e.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
       console.log('Animation Ended!');
});

编辑:伙计们，动画不适用于填充动画。我需要使用.css动画。

Answer 1

如果使用jQuery，则可以使用.animate()方法设置动画

.animate()方法具有complete callback

const e = $("#span-7");
e.animate({
  fill: "#4287f5"
}, 500, function(){
   // animation complete
})

更新:对于动画填充属性，必须使用jQuery plugin jQuery Color

工作演示https://codepen.io/-greg-/pen/jOqMJNp

更新:如果您不想使用jQuery颜色插件:请使用event transitionend和webkitTransitionEnd demo