Jquery使用animate实现css3的transform动画效果

首先,Jquery并不支持在animate的样式中的transform效果,这里通过使用animate的回调函数来实现。

<div id="div" style="width: 200px;height: 200px;border: 1px solid red; transition: all 2s"></div>


$("#div").animate({},function(){                                       //第一个花括号里面是动画内容,可以为空,但不能省去中括号

$("#div").css({'width':'300px','height':'300px','transform':'rotate(180deg)'});                                   //在回调函数里面改变css属性来实现transform中的动画变换 

})

ps:在同时使用多个transform属性时,用空格符隔开多个属性值,如:

transform:rotate(180deg) translate(200px);

注意:使用rotate旋转时,坐标轴也同时旋转相应的角度,所以假如需要同时使用rotae与其他变换时,一定要注意他们的先后顺序。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页