suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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">

P粉714780768P粉714780768517 Tage vor579

Antworte allen(1)Ich werde antworten

  • P粉494151941

    P粉4941519412023-09-10 13:10:30

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

    Antwort
    0
  • StornierenAntwort