如何在 js 中的单击事件上添加多个时间动画 css 类？

Posted 2023-03-06

【中文标题】如何在 js 中的单击事件上添加多个时间动画 css 类？

【英文标题】：How can I add multiple time animate css class on click event in js?

【发布时间】：2018-09-29 10:02:18

【问题描述】：

当我点击按钮框动画正确。它只准时工作，第二次它不工作。我该如何管理？所以当我点击按钮时，我想为它设置动画。

function myFunction() 
  document.getElementById("box").classList.add('animated', 'bounceIn');

#box 
  background: red;
  height: 60px;
  width: 60px;
  margin-bottom: 20px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
    <div id="box"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <button class="btn btn-sm btn btn-primary" onclick="myFunction()">click to animate</button>
  </div>
</div>

【参考方案1】：

动画结束后你需要移除这个类

function myFunction() 
    document.getElementById("box").classList.add('animated','bounceIn');
  setTimeout(function() 
    document.getElementById("box").classList.remove('animated','bounceIn');
  , 100)

#box
  background: red;
  height:60px;
  width:60px;
  margin-bottom:20px;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
    <div id="box"></div>
  </div>
</div>
<div class="container">
  <div class="row">
<button class="btn btn-sm btn btn-primary" onclick="myFunction()">click to animate</button>
  </div>
</div>

https://codepen.io/anon/pen/QrwWMO

或者你可以使用纯css，不需要使用javascript

#box
  background: red;
  height:60px;
  width:60px;
  margin-bottom:20px;


button:active + #box
  -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
      animation-name: bounceIn;
      animation-duration: .75s;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="container">
  <div class="row">
<!--     <div id="box"></div> -->
  </div>
</div>
<div class="container">
  <div class="row">
<button class="btn btn-sm btn btn-primary" >click to animate</button>
    <div id="box"></div>
  </div>
</div>

【讨论】：

间隔时间删除这个类但是在间隔期间它不起作用有什么解决办法吗？