Comment exécuter une animation CSS à chaque fois qu'une classe suivante est ajoutée à un élément

Question

J'ai mis en place une classe d'animation CSS pour pouvoir animer l'élément

.

Lorsque vous cliquez sur le bouton de saisie, cette classe sera ajoutée au

et je souhaite que le

vole vers l'écran à chaque fois que vous cliquez sur le bouton de saisie de l'exemple.

Cependant, cela ne fonctionne que la première fois, les clics de saisie ultérieurs n'animeront pas l'élément. Qu'est-ce que j'oublie ici?

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

Vous devez ajouter un nouvel écouteur d'événement à l'événement animationend pour réinitialiser la propriété
animation-name sur none

J'aime le code ci-dessous :

$( document ).ready(function() {

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

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

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

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

        });

      });

    });