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

前端开发者jquery
https://www.rokub.com
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/
» 本文来自:前端开发者 » 《提供流畅CSS3变换和过渡效果的jQuery插件-jQuery.transit_前端开发者》
» 本文链接地址:https://www.rokub.com/2037.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!