反正CSS3过渡动画添加到元素jQuery的事件 [英] anyway to add css3 transition animation to element on jQuery event
本文介绍了反正CSS3过渡动画添加到元素jQuery的事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是有办法在一个jQuery事件添加一个CSS3动画，例如：
＆LT;风格＆GT;
。框{
宽度：100像素;
高度：100像素;
bakground颜色：＃000;
}.animate {
宽度：0像素;
-webkit-过渡性质：宽度; -webkit-过渡时间：500毫秒;
-moz-过渡性质：宽度; -moz-过渡时间：500毫秒;
}＆LT;风格＆GT;＆LT; HTML和GT;
＆LT; DIV CLASS =盒子＆GT;＆LT; / DIV＆GT;＆LT;按钮和gt;点击我的动画＆LT; /按钮＆GT;$（'按钮'）。点击（函数（）{
$（'盒子'）addClass（'动画'）。
}）;＆LT; / HTML＆GT;
解决方案
只要把
-webkit-过渡性质：宽度; -webkit-过渡时间：500毫秒;
-moz-过渡性质：宽度; -moz-过渡时间：500毫秒;
在.box的声明。
你的JS是罚款。
is there a way to add a css3 animation upon a jQuery event for example:
<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>
解决方案
Just put the
-webkit-transition-property: width; -webkit-transition-duration: 500ms;
-moz-transition-property: width; -moz-transition-duration: 500ms;
in the .box declaration. Your JS is fine.
这篇关于反正CSS3过渡动画添加到元素jQuery的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
