javascript - 使用 Javascript 激活 CSS3 动画

Question

我正在玩一些 CSS 动画，我正在尝试使用 Javascript onclick 触发动画。注意似乎对我有用。

http://codepen.io/Quinn1011/pen/Eltpk

有人可以看看并帮助我。我什至无法在页面加载时隐藏“下一个”div。

Answer 1

将以下行添加到 #next 的 css 中：

display:none 

哇，这很容易，现在下一个节目是点击而不是加载。

.show()只不过是删除了 css 属性 display:none。就像.hide()在元素中添加 display:none

如果您理解这一点，您将很容易理解您的动画是在加载时运行的，因为已经设置了 css

所以点击将西装类添加到您的元素

http://api.jquery.com/addClass/

啊抱歉，那将是 jquery 解决方案，如果你没有使用 jQuery 并且你没有提到它，那么这是纯粹的方法：

function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);

element.setAttribute("class", newClass); 
}

你可以像这样调用这个函数：

$('#button').click(function(){
  changeClass('next','anmimate');
 });