jQuery Transit

🌙
手机阅读
本文目录结构
a'xi'he

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

源码 & 下载

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

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

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang