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

Question

自然，我们可以使用关键帧创建CSS动画，并从那里进行控制。

但是，理想情况下，我希望通过单击按钮来触发此动画-因此单击按钮将是一个事件...

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

现在，在单击时，我要触发该动画；而不是来自CSS动画属性中。

Answer 1

看到这里jsfiddle

如果您希望每次按下按钮都可以播放动画，请使用以下代码：

$('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);
});

$('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;
  }
}

说明：

1. 在要添加animated动画的元素上单击按钮添加类（或任何其他类）后，.fademe
2. 使setTimeout(function()延迟removeClass动画的持续时间，1.5s或1500ms
3. 在CSS中编写animation的声明@keyframes，然后使用JQ添加的类将其添加到元素中.fademe.animated