我有一個 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); }); }); });