提供流畅CSS3变换和过渡效果的jQuery插件-jQuery.transit_前端开发者

前端开发者丨jquery

jquery Transit是jQuery库中一个帮助你对css元素进行变形和设置过渡状态的插件。

实例请参考jQuery Transit网站。

用法在引用jQuery之后引用jquery.transit.js即可。

需要1 .4 以上的jQuery版本。

1 2 也可通过 bower 和 npm 来安装。

$ bower install–save jquery.transit $ npm install–save jquery.transit 1 2 $ bower install–save jquery.transit $ npm install–save jquery.transit元素变形就像在jQuery中设置css属性一样， 你可以对变形参数进行设置（ 注意： 这样只能设置参数值而不能产生动画效果）。

$(“#box”).css({

x:’30px’

}); // Move right $(“#box”).css({ y: ’60px’ }); // Move down $(“#box”).css({ translate: [60,30] }); // Move right and down $(“#box”).css({ rotate: ’30deg’ }); // Rotate clockwise $(“#box”).css({ scale: 2 }); // Scale up 2x (200%) $(“#box”).css({ scale: [2, 1.5] }); // Scale horiz and vertical $(“#box”).css({ skewX: ’30deg’ }); // Skew horizontally $(“#box”).css({ skewY: ’30deg’ }); // Skew vertical $(“#box”).css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation $(“#box”).css({ rotateY: 30 }); $(“#box”).css({ rotate3d: [1, 1, 0, 45] }); 1 2 3 4 5 6 7 8 9 10 11 $ ( “#box” ) . css ( { x : ’30px’ } ) ; // Move right $ ( “#box” ) . css ( { y : ’60px’ } ) ; // Move down $ ( “#box” ) . css ( { translate : [ 60 , 30 ] } ) ; // Move right and down $ ( “#box” ) . css ( { rotate : ’30deg’ } ) ; // Rotate clockwise $ ( “#box” ) . css ( { scale : 2 } ) ; // Scale up 2x (200%) $ ( “#box” ) . css ( { scale : [ 2 , 1.5 ] } ) ; // Scale horiz and vertical $ ( “#box” ) . css ( { skewX : ’30deg’ } ) ; // Skew horizontally $ ( “#box” ) . css ( { skewY : ’30deg’ } ) ; // Skew vertical $ ( “#box” ) . css ( { perspective : 100 , rotateX : 30 } ) ; // Webkit 3d rotation $ ( “#box” ) . css ( { rotateY : 30 } ) ; $ ( “#box” ) . css ( { rotate3d : [ 1 , 1 , 0 , 45 ] } ) ;可以使用相对值进行设置。

$(“#box”).css({

rotate:’+=30′

}); // 30 degrees more $(“#box”).css({ rotate: ‘-=30’ }); // 30 degrees less 1 2 $ ( “#box” ) . css ( { rotate : ‘+=30’ } ) ; // 30 degrees more $ ( “#box” ) . css ( { rotate : ‘-=30’ } ) ; // 30 degrees less所有单位都是可选的。

$(“#box”).css({

x:’30px’

});

$(“#box”).css({

x:30

});

1 2 $(“#box”).css({

x:’30px’

});

$(“#box”).css({

x:30

});

多个参数可以用逗号分隔或使用参数数组。

$(“#box”).css({

translate: [60, 30]

});

$(“#box”).css({

translate: [’60px’, ’30px’]

});

$(“#box”).css({

translate:’60px,30px’

});

1 2 3 $(“#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’] 1 2 $ ( “#box” ) . css ( ‘rotate’ ) ; //=> “30deg” $ ( “#box” ) . css ( ‘translate’ ) ; //=> [’60px’, ’30px’]动画 – $.fn.transition$(‘…’).transition(options, [duration], [easing], [complete]) 1 $ ( ‘…’ ) . transition ( options , [ duration ] , [ easing ] , [ complete ] )你可以使用$.fn.transition()调用CSS3 transition功能来制作动画。

其工作方式完全类似$.fn.animate()， 只是它使用的是CSS3 transitions。

$(“#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 1 2 3 4 5 6 $ ( “#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 () { /* … */ }

});

1 2 3 4 5 6 $(“#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变形， 没有动画队列。

jQuery animate enhanced优点： 直接覆盖$.fn.animate() 以支持CSS过渡状态设置。

缺点： 直接覆盖$.fn.animate()， 不支持元素变形。

jQuery 2 D transformations优点： 支持多种元素变形。

缺点： 不支持CSS过渡状态设置； 使用fx.step进行动画设置。

jQuery CSS3 rotate优点： 只提供元素旋转功能。

缺点： 只有元素旋转功能。

不支持过渡状态设置。

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

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