搜索

首页  >  问答  >  正文

如何使 CSS 动画在每次将后续类添加到元素时运行

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

P粉714780768P粉714780768560 天前608

全部回复(1)我来回复

  • 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);
        
    
            });
    
          });
    
        });

    回复
    0
  • 取消回复