Cara membuat animasi CSS dijalankan setiap kali kelas berikutnya ditambahkan pada elemen

Question

Saya menyediakan kelas animasi CSS supaya saya boleh menganimasikan elemen

.

Apabila butang input diklik, kelas ini akan ditambah pada

dan saya mahu

terbang ke skrin setiap kali butang input dalam contoh diklik.

Walau bagaimanapun, ia hanya berfungsi pada kali pertama, sebarang klik input seterusnya tidak akan menghidupkan elemen. Apa yang saya hilang di sini?

$( 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

Anda perlu menambah pendengar acara baharu pada acara animationend untuk menetapkan semula sifat
animation-name kepada none

Seperti kod di bawah:

$( document ).ready(function() {

      $('#cloc').click(function () {

        $('p').removeClass('anim').promise().done(function() {

          $('p').addClass('anim');

          setTimeout(function() {
              $('p').removeClass('anim');
          },1000);
    

        });

      });

    });