So führen Sie eine CSS-Animation jedes Mal aus, wenn einem Element eine nachfolgende Klasse hinzugefügt wird

Question

Ich habe eine CSS-Animationsklasse eingerichtet, damit ich das

-Element animieren kann.

Wenn auf die Eingabeschaltfläche geklickt wird, wird diese Klasse zu

hinzugefügt und ich möchte, dass

jedes Mal zum Bildschirm fliegt, wenn auf die Eingabeschaltfläche im Beispiel geklickt wird.

Allerdings funktioniert es nur beim ersten Mal. Bei nachfolgenden Eingabeklicks wird das Element nicht animiert. Was fehlt mir hier?

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

        });

      });

    });