Question

这是我的动画代码：

.animated{transition:all ease 5s;position:absolute;right:200px}
window.setInterval(function(){
   $('.animated').css("right",parseInt($('.animated').css('right'))+5)
},2000);
$('.animated').click(function(e){
   if (e == //css animation executing){
       console.log('animation on the go')
   })
   else if (e == //css animation completed){
       console.log('animation completed')
   }
})

我可以使用JavaScript来检测CSS动画是否正在运行吗？

Answer 1

也许您可以保存right的旧element位置。将其插入所有代码之前。

// Old Right Position
// Keep in top

var oldRightPos = document.querySelector('.animated').style.right;

// Your animation...
window.setInterval(function(){
   $('.animated').css("right",parseInt($('.animated').css('right'))+15)
},2000);

// Part where you detect animation

$('.animated').click(() => {

if (oldRightPos <= document.querySelector('.animated').style.right) {

alert('CSS ANIMATION RUNNING!!!');

}else{

alert('still no luck:(');

}});

.animated{transition:all ease 5s;position:absolute;right:200px

<div class='animated'>HELLO</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

也许会的。：）

Answer 2

jQuery提供了一个可以使用的伪选择器:animated。

if( $('.animated').is(':animated') ){
   console.log('animation on the go');
}

参考：:animated selector docs

检测CSS动画是否正在使用JavaScript运行

2 个答案: