javascript - 有没有可行的方法使用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);
});

.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()延迟removeClass在动画期间 1.5s或 1500ms
3. 在 CSS 中编写动画声明，@keyframes , 并将其添加到具有 JQ 添加的类的元素 .fademe.animated