jquery.transit：提供流畅CSS3变换和过渡效果的jQuery插件

Posted 2021-04-08 web全栈技术中心

如果觉得对您和你的朋友有用，欢迎转发收藏哦

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

实例请参考jQuery Transit网站。

用法

在引用jQuery之后引用jquery.transit.js即可。需要1.4以上的jQuery版本。

javascript

1 2	<script src='jquery.js'></script> <script src='jquery.transit.js'></script>

也可通过bower和npm来安装。

Shell

1 2	$ bower install --save jquery.transit $ npm install --save jquery.transit

元素变形

就像在jQuery中设置CSS属性一样，你可以对变形参数进行设置（注意：这样只能设置参数值而不能产生动画效果）。

JavaScript

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] });

可以使用相对值进行设置。

JavaScript

1 2	$("#box").css({ rotate: '+=30' });          // 30 degrees more $("#box").css({ rotate: '-=30' });          // 30 degrees less

所有单位都是可选的。

JavaScript

1 2	$("#box").css({ x: '30px' }); $("#box").css({ x: 30 });

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

JavaScript

1 2 3

$("#box").css({ translate: [60,30] }); $("#box").css({ translate: ['60px','30px'] }); $("#box").css({ translate: '60px,30px' });

支持Getters函数获取属性值（获取的属性有多个值则返回一个数组）。

JavaScript

1 2	$("#box").css('rotate');     //=> "30deg" $("#box").css('translate');  //=> ['60px', '30px']

动画 – $.fn.transition

JavaScript

1	$('...').transition(options, [duration], [easing], [complete])

你可以使用$.fn.transition()调用CSS3 transition功能来制作动画。其工作方式完全类似$.fn.animate()，只是它使用的是CSS3 transitions。

JavaScript

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）。

JavaScript

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 2D transformations

• 优点：支持多种元素变形。

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

jQuery CSS3 rotate

• 优点：只提供元素旋转功能。

• 缺点：只有元素旋转功能。不支持过渡状态设置。

支持

• Bugs and requests：通过本项目的issues tracker进行提交。

• Questions：在StackOverflow上进行提问（请使用jquery-transit标签）。