jQuery Transit

本文目录结构

插件 jQuery.transit 中文 API 文档，jQuery 的超级流畅的 CSS3 转换和转换

源码 & 下载

• Github 地址：https://github.com/rstacruz/jquery.transit
• 源码下载： -
• 效果演示： -

jQuery Transit 是一个帮助你在 jQuery 中进行 CSS 转换和转换的插件。

有关示例，请参阅 jQuery Transit 网站。

用法

只需在 jQuery 之后包含 jquery.transit.js。需要 jQuery 1.4+。

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

它也可以通过凉亭和 npm 获得。

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

转换

您可以像设置 jQuery 中的任何 CSS 属性一样设置转换。（注意你不能 $.fn.animate()，只能设置它们。）

$("#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

所有单位都是可选的。

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

多个参数可以是逗号或数组。

$("#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']

动画 - $.fn.transition

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

您可以使用 CSS3 过渡动画 $.fn.transition()。$.fn.animate() 除了使用 CSS3 过渡之外，它的工作原理完全相同。

$("#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

你也可以传递持续时间和缓和并完成值 options，就像在里面一样 $.fn.animate()。

$("#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

优点：简单地提供轮换。 缺点：只是提供轮换。没有过渡支持。