Question

有没有办法在jQuery事件上添加css3动画，例如：

<style>
.box{
width:100px;
height:100px;
bakground-color:#000;
}

.animate{
 width:0px;
 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
 -moz-transition-property: width; -moz-transition-duration: 500ms;
}

<style>

<html>
<div class="box"></div>

<button>click me to animate</button>

$('button').click(function(){
$('.box').addClass('animate');
});

</html>

Answer 1

只需输入

即可

 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
     -moz-transition-property: width; -moz-transition-duration: 500ms;

<。>在.box声明中。你的JS很好。

Answer 2

我认为animo.js可能是你的回答http://labs.bigroomstudios.com/libraries/animo-js（通过http://tympanus.net/codrops/collective/collective-80/）

根据他们的网站......

“您可以轻松地叠加动画以逐个启动，指定回调以完成动画，或者只是在任何事件或任何您喜欢的时刻发布动画。”

无论如何将css3过渡动画添加到jQuery事件上的元素

2 个答案: