使用Javascript激活CSS3动画

将以下行添加到#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');
 });