Question

我可以这样做吗？一个例子 -

CSS代码

div {
  animation-name: test
  animation-duration: 5s
}
@keyframes test{
  from {background-color: red;}
  to {background-color: blue;}    
}

现在，如何让动画完成后如何检查JQuery？另外，我实际上想要使用一次出现一个单词的字符串来执行此操作，然后让JQuery查看它是否已完成，如果已完全显示，则启动5秒计时器。我可以这样做吗？

谢谢！

Answer 1

您需要在javascript中收听animationend和webkitAnimationEnd个事件。

像这样：

$('div').on('animationend webkitAnimationEnd', function() { 
    alert('end');
});

$('div').on('animationend webkitAnimationEnd', function() { 
	alert('end');
});

div {
    width: 100px;
    height: 100px;
  animation-name: test;
  animation-duration: 5s
}
@keyframes test {
  from {background-color: red;}
  to {background-color: blue;}    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

检查是否使用JQuery或JS完成了CSS动画？

1 个答案: