无论如何将css3过渡动画添加到jQuery事件上的元素
[英]anyway to add css3 transition animation to element on jQuery event
问题描述
有没有办法在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>
2 个解决方案
解决方案1
1 2013-09-11 11:46:09
我认为animo.js可能是你的答案http://labs.bigroomstudios.com/libraries/animo-js （来自http://tympanus.net/codrops/collective/collective-80/ ）
按他们的网站...
“你可以轻松地叠加动画，一个接一个地发射，指定完成动画的回调，或者只是在任何事件或任何你喜欢的时刻发射动画。”
解决方案2
1 已采纳 2011-04-08 00:25:38
只是把
-webkit-transition-property: width; -webkit-transition-duration: 500ms;
-moz-transition-property: width; -moz-transition-duration: 500ms;
在.box声明中。 你的JS很好。
CSS3动画与jQuery触发的CSS3过渡冲突吗？
[英]CSS3 Animation conflicting with CSS3 transition that's triggered by jQuery?
使用Jquery将标签移动到另一个DOM元素并进行CSS3转换
[英]Move a tag to another DOM element with Jquery and do CSS3 transition
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.