无论如何要在 jQuery 事件上向元素添加 css3 过渡动画答案

【问题标题】：anyway to add css3 transition animation to element on jQuery event无论如何要在 jQuery 事件上向元素添加 css3 过渡动画
【发布时间】：2011-08-01 03:20:38
【问题描述】：

有没有办法在 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>

【问题讨论】：

标签： jquery animation css transition

【解决方案1】：

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

根据他们的网站...

“您可以轻松地堆叠动画以一个接一个地触发，指定动画完成的回调，或者简单地在任何事件或您喜欢的任何时刻触发动画。”

【讨论】：

【解决方案2】：

只要放

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

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

【讨论】：

这对我不起作用，单击按钮时没有任何反应。
它在小提琴中工作，但我正在努力让它工作。看起来我只是在我的实际代码中遗漏了一些东西。谢谢！