jQuery Transit 优雅的 Web CSS3 动画插件

Question

jQuery Transit 是一个优雅的 Web CSS3 动画插件，该 jQuery 插件扩展了 jQuery 的动画功能，增加了许多 CSS3 特性，如 rotata（旋转）、skew（扭曲）、scale（缩放）等效果。

使用方法

在 jQuery 之后引入  jquery.transit.js 文件

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

或者通过 bower 和 npm 安装

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

你可以通过 jQuery 内置的 css() 方法，直接设置元素的结束位置，jQuery Transit 会自动填充动画效果，但是不能使用 $.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' });

获取具有多个参数的属性返回数组：

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

动画 - $.fn.transition

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

你可以使用 $.fn.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

您也可以将动画的运行时间、动画效果和完成后的回调函数传入参数中，就是想是在 $.fn.animate() 中一样：

$("#box").transition({
  opacity: 0.1, scale: 0.3,
  duration: 500,
  easing: 'in',
  complete: function() { /* ... */ }
});

相关链接

• 项目地址：https://www.wenjiangs.com/wp-content/uploads/2018/06/jquery.transit/
• Github 地址：https://github.com/rstacruz/jquery.transit