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

CSS代码：

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

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


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

HTML：

<div class="fademe"> </div>

<button>CLICK ME</button>

解释：

点击按钮将类animated（或任何其他类）添加到要应用动画的元素.fademe
在动画setTimeout(function()或removeClass

1.5s

1500ms

在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
             }

Answer 4

有一个切换方法可以很好地解决这个问题，希望它有帮助：

function Fade() {
  document.getElementById("box").classList.toggle("animate");
}

#box {
  background-color: black;
  height: 50px;
  width: 50px;
}

.animate {
  animation: fademe 0.5s;
}

@keyframes fademe {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<html>

<head>
  <title>
    Animation Trigger
  </title>
</head>

<body>
  <div id="box"></div>
  <button onclick="Fade()"> Fade above Box</button>
</body>

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

4 个答案: