写插件时遇到的一个小问题,关于animate和css3的问题
昨天写代码时,偶然想到了如果我们把css3属性放在animate中,指定时间。能否实现动画呢。举个例子吧:
<script> $(".box").animate({ "-webkit-transform":"rotate(90deg)" },1000); </script>
如上代码,box会在一秒种从0deg旋转到90deg吗?答案是否定的。
于是我查了下jquery的手册,发现animate的第一参数中确实不能放css3的属性。于是乎怎么办呢?
我在stackoverflow上发现了一个技巧,来用js操作css3属性动画。当然有人要问了,用animation不就好了吗?问题是,animation过于死板了,并且只能用在一个对象上。如果我在改变。box的属性时,还要同时改变另一个box2的css,用animation就不行了。
那么,我们换一种方式利用jquery的animation函数。
$({property:0}).animate({property:100}, {
duration:500;
step:$(".box").css("
-webkit-transform
","rotate("+this.property/100*90+"deg)")
} );
其实现在有些网站上的激光加载条,就是通过这种方式做的。