jQuery Transit 优雅的 Web CSS3 动画插件

发布于 2018-06-28 10:56:07 字数 2757 浏览 1561 评论 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() { /* ... */ }
});

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。