我有一个 CSS 动画类设置，因此我可以为
元素设置动画。
当单击输入按钮时，该类将添加到
中，我希望每次单击示例中的输入按钮时，
都会飞到屏幕上。
但是，它仅在第一次有效，任何后续的输入单击都不会使元素产生动画。我在这里缺少什么？
$( document ).ready(function() {
jQuery('#cloc').click(function () {
jQuery('p').removeClass('anim').promise().done(function() {
jQuery('p').addClass('anim');
});
});
});
input {
margin-bottom:20px;
margin-top:50px;
}
p {
opacity:1;
}
.anim {
animation-duration: 200ms;
animation-name: slidein;
}
@keyframes slidein {
from {
transform:translateX(-200px);
opacity:0;
}
to {
transform:translateX(0px);
opacity:1;
}
}
p {
position:absolute;
left:0px;
opacity:0;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="position:relative"> <p> HERE IS A TESTER FOR YOU. </p> </div> <input type="button" id="cloc" value="test">
您需要向 animationend 事件添加新的事件侦听器，以将属性
animation-name 重置为 none
像下面的代码：
$( document ).ready(function() { $('#cloc').click(function () { $('p').removeClass('anim').promise().done(function() { $('p').addClass('anim'); setTimeout(function() { $('p').removeClass('anim'); },1000); }); }); });