如何触发CSS动画[重复]

Question

我是 CSS 新手，但知道基础知识，我想使用按钮触发此动画。我无法让它工作。

我在 Stackoverflow、Jquery、Jscript 中使用了几个示例，但似乎都没有提到 @keyframes。

我看到了更多关于通过类和删除类引用动画的信息（据我了解，这种方式是通过删除元素来重新启动动画）。我尝试将其切换到类。

我也想知道什么是最佳实践？

最好的方法是什么？我以为会很简单，但我错了.....

我有这样的 CSS：

#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;

}
 @keyframes example {
 from { transform: translateY(200px)}
  to {height: 200px; background-color: teal;}
}

Answer 1

我无法重现您使用 CSS 描述的问题。

请参阅下面的示例：

使用mcve 编辑问题后，此答案将被删除。

请注意：

如果您的问题是关于最佳实践，那么对于 StackOverflow 来说，这将是题外话。请参阅我们的how to ask 页面

$(function() {
  $("#test-btn").on('click', function() {
    $("#test").addClass('animation');
  });
});

.animation {
  margin-left: 20px;
  margin-top: 20px;
  width: 50px;
  height: 0px;
  background: maroon;
  position: absolute;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes example {
  from {
    transform: translateY(200px)
  }
  to {
    height: 200px;
    background-color: teal;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test-btn">Animate</button>
<hr/>
<div id="test"></div>

Answer 2

如果你决定废弃 jQuery（或者你必须在没有它的情况下工作），以便在你的 #test 元素上切换 CSS 动画使用原生 JavaScript , 将动画相关的 CSS 属性分离到一个类中：

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

然后在#test 元素上切换（添加/删除） .animate 类：

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }

  isAnimating = !isAnimating;
});

var element = document.getElementById('test');
var button = document.getElementById('toggle');
var isAnimating = false;

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }
  
  isAnimating = !isAnimating;
});

#test {
  margin-left: 20px;
  margin-top: 20px;
  width: 50px;
  height: 0px;
  background: maroon;
  position: absolute;  
}

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

#toggle {
  margin-left: 100px;
}

@keyframes example {
  from {
    transform: translateY(200px)
  }
  to {
    height: 200px;
    background-color: teal;
  }
}

<div id="test"></div>
<button id="toggle">Add animation</button>