分享一个提供流畅CSS3变换和过渡效果的jQuery插件_前端开发者

前端开发者jquery

https:www.rokub.com


jQueryTransit是jquery库中一个帮助你对css元素进行变形和设置过渡状态的插件。实例请参考jQueryTransit网站。用法在引用jquery之后引用jquery.transit.js即可。需要1.4以上的jQuery版本。

<scriptsrc='jquery.js'></script>

<scriptsrc='jquery.transit.js'></script>

12<scriptsrc='jquery.js'></script>

<scriptsrc='jquery.transit.js'></script>

也可通过bower和npm来安装。

$bowerinstall--savejquery.transit

$npminstall--savejquery.transit

12$bowerinstall--savejquery.transit

$npminstall--savejquery.transit元素变形就像在jQuery中设置css属性一样,你可以对变形参数进行设置(注意:这样只能设置参数值而不能产生动画效果)。

$(\"#box\").css({x:'30px'});//Moveright$(\"#box\").css({y:'60px'});//Movedown$(\"#box\").css({translate:[60,30]});//Moverightanddown$(\"#box\").css({rotate:'30deg'});//Rotateclockwise$(\"#box\").css({scale:2});//Scaleup2x(200%)$(\"#box\").css({scale:[2,1.5]});//Scalehorizandvertical$(\"#box\").css({skewX:'30deg'});//Skewhorizontally$(\"#box\").css({skewY:'30deg'});//Skewvertical$(\"#box\").css({perspective:100,rotateX:30});//Webkit3drotation$(\"#box\").css({rotateY:30});$(\"#box\").css({rotate3d:[1,1,0,45]});1234567891011$(\"#box\").css({x:'30px'});//Moveright$(\"#box\").css({y:'60px'});//Movedown$(\"#box\").css({translate:[60,30]});//Moverightanddown$(\"#box\").css({rotate:'30deg'});//Rotateclockwise$(\"#box\").css({scale:2});//Scaleup2x(200%)$(\"#box\").css({scale:[2,1.5]});//Scalehorizandvertical$(\"#box\").css({skewX:'30deg'});//Skewhorizontally$(\"#box\").css({skewY:'30deg'});//Skewvertical$(\"#box\").css({perspective:100,rotateX:30});//Webkit3drotation$(\"#box\").css({rotateY:30});$(\"#box\").css({rotate3d:[1,1,0,45]});可以使用相对值进行设置。$(\"#box\").css({rotate:'+=30'});//30degreesmore$(\"#box\").css({rotate:'-=30'});//30degreesless12$(\"#box\").css({rotate:'+=30'});//30degreesmore$(\"#box\").css({rotate:'-=30'});//30degreesless所有单位都是可选的。$(\"#box\").css({x:'30px'});$(\"#box\").css({x:30});12$(\"#box\").css({x:'30px'});$(\"#box\").css({x:30});多个参数可以用逗号分隔或使用参数数组。$(\"#box\").css({translate:[60,30]});$(\"#box\").css({translate:['60px','30px']});$(\"#box\").css({translate:'60px,30px'});123$(\"#box\").css({translate:[60,30]});$(\"#box\").css({translate:['60px','30px']});$(\"#box\").css({translate:'60px,30px'});支持Getters函数获取属性值(获取的属性有多个值则返回一个数组)。$(\"#box\").css('rotate');//=>\"30deg\"$(\"#box\").css('translate');//=>['60px','30px']12$(\"#box\").css('rotate');//=>\"30deg\"$(\"#box\").css('translate');//=>['60px','30px']动画–$.fn.transition$('...').transition(options,[duration],[easing],[complete])1$('...').transition(options,[duration],[easing],[complete])你可以使用$.fn.transition()调用CSS3transition功能来制作动画。其工作方式完全类似$.fn.animate(),只是它使用的是CSS3transitions。$(\"#box\").transition({opacity:0.1,scale:0.3});$(\"#box\").transition({opacity:0.1,scale:0.3},500);//duration$(\"#box\").transition({opacity:0.1,scale:0.3},'fast');//easing$(\"#box\").transition({opacity:0.1,scale:0.3},500,'in');//duration+easing$(\"#box\").transition({opacity:0.1,scale:0.3},function(){..});//callback$(\"#box\").transition({opacity:0.1,scale:0.3},500,'in',function(){..});//everything123456$(\"#box\").transition({opacity:0.1,scale:0.3});$(\"#box\").transition({opacity:0.1,scale:0.3},500);//duration$(\"#box\").transition({opacity:0.1,scale:0.3},'fast');//easing$(\"#box\").transition({opacity:0.1,scale:0.3},500,'in');//duration+easing$(\"#box\").transition({opacity:0.1,scale:0.3},function(){..});//callback$(\"#box\").transition({opacity:0.1,scale:0.3},500,'in',function(){..});//everything如同$.fn.animate(),调用时你可以设置动画时长(duration),淡出效果(easing)以及动画完成时的回调函数(complete)。$(\"#box\").transition({opacity:0.1,scale:0.3,duration:500,easing:'in',complete:function(){/*...*/}});123456$(\"#box\").transition({opacity:0.1,scale:0.3,duration:500,easing:'in',complete:function(){/*...*/}});测试Transit有一组单独的测试程序。打开test/index.html可见。完成贡献后务必在不同的jQuery版本和浏览器上进行测试。相似资源Velocity.js(推荐!)优点:对数百个同时发生的过渡状态进行了优化。额外功能非常多。Move.js优点:不需要先加载jQuery,语法很好。缺点(目前来看):没有iOS支持(不使用translate3d),有一些IE漏洞,没有3D变形,没有动画队列。jQueryanimateenhanced优点:直接覆盖$.fn.animate()以支持CSS过渡状态设置。缺点:直接覆盖$.fn.animate(),不支持元素变形。jQuery2Dtransformations优点:支持多种元素变形。缺点:不支持CSS过渡状态设置;使用fx.step进行动画设置。jQueryCSS3rotate优点:只提供元素旋转功能。缺点:只有元素旋转功能。不支持过渡状态设置。

支持官方网站:http://ricostacruz.com/jquery.transit

开源地址:https://github.com/rstacruz/jquery.transit/

前端开发者丨jQuery

https:www.rokub.com
» 本文来自:前端开发者 » 《分享一个提供流畅CSS3变换和过渡效果的jQuery插件_前端开发者》
» 本文链接地址:https://www.rokub.com/240.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!