是否有可行的方法来触发CSS关键帧动画使用JS？

Question

当然，我们可以使用关键帧创建一个CSS动画，并从那里控制它。

但是，理想情况下，我想从一个按钮点击触发这个动画-所以按钮单击将是一个事件.

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

现在，在单击时，我希望触发此动画；而不是从CSS动画属性中触发。

Answer 1

见这里小提琴

如果您希望每次按下该按钮时动画都能工作，请使用以下代码：

$('button').click(function() {
    $(".fademe").addClass('animated');
    setTimeout(function() {
      $(".fademe").removeClass('animated');
    }, 1500);
});

在本例中，1500是animation-duration，1.5s

​

$('button').click(function() {
  $(".fademe").addClass('animated');
  setTimeout(function() {
    $(".fademe").removeClass('animated');
  }, 1500);
});

.fademe {
  width: 100px;
  height: 100px;
  background: red;
}

.fademe.animated {
  animation: fade-in 1.5s ease;
}


@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">

</div>

<button>CLICK ME</button>

​

说明：

1. 单击按钮，将类animated (或任何其他类)添加到要向其应用动画的元素.fademe
2. 使setTimeout(function()在动画1.5s或1500ms期间延迟removeClass
3. 用CSS编写动画@keyframes的声明，并通过JQ .fademe.animated添加的类将其添加到元素中。

Answer 2

​

$("#move-button").on("click", function(){
  $("#ship").removeClass("moving");
  $("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
  $("#ship").addClass("moving");
});//

#ship
{
  background: green;
  color: #fff;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 100px;
}

#move-button
{
  margin-top: 20px;
}

#ship.moving
{
  animation: moving 2s ease;
}

@keyframes moving
{
  0%{ transform: translate(0px);}
  50%{ transform: translate(20px);}
  100%{ transform: translate(0px);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>

​

Answer 3

如果您想让动画发生，并且总是在允许事件侦听器再次触发之前结束，我建议您控制这样的行为：

// Add this to your event listener
if (!element.classList.contains("myClass")) {
    element.className = "myClass";
    setTimeout(function() {
        element.classList.remove("myClass");
    }, 1000); //At least the time the animation lasts
}