anyway to add css3 transition animation to element

2019-09-08 14:53发布

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>

标签： jquery animation css3 transition

2条回答

smile是对你的礼貌

2楼-- · 2019-09-08 15:50

I think animo.js could be your answer http://labs.bigroomstudios.com/libraries/animo-js (via http://tympanus.net/codrops/collective/collective-80/)

Per their site...

"You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event or at any moment you please."

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

3楼-- · 2019-09-08 15:52

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.

0人赞添加讨论(0) 举报

anyway to add css3 transition animation to element

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间