如何使 CSS 動畫在每次將後續類別新增至元素時運行

Question

我有一個 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">

Answer 1

您需要在 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);
    

        });

      });

    });