如何在 js 中的点击事件中添加多次动画 css class？

Question

当我单击动画按钮框时 properly.Its 只按时工作，第二次它不工作。我该如何管理？所以我想在我不单击按钮时为其设置动画。

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>

Answer 1

你需要在动画完成后移除这个class

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>

如何在 js 中的点击事件中添加多次动画 css class？

How can I add multiple time animate css class on click event in js?

javascript

css

animation

animate.css