jQuery Transit 优雅的 Web CSS3 动画插件 - 文章教程

jQuery Transit 优雅的 Web CSS3 动画插件

发布于 2018-06-28 字数 2999 浏览 1420 评论 0

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() { /* ... */ }
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0