jquery.transit:提供流畅CSS3变换和过渡效果的jQuery插件

jQuery Transit是jQuery库中一个帮助你对CSS元素进行变形和设置过渡状态的插件。

jquery_transit

实例请参考jQuery Transit网站

用法

在引用jQuery之后引用jquery.transit.js即可。需要1.4以上的jQuery版本。


也可通过bowernpm来安装。

元素变形

就像在jQuery中设置CSS属性一样,你可以对变形参数进行设置(注意:这样只能设置参数值而不能产生动画效果)。


可以使用相对值进行设置。


所有单位都是可选的。


多个参数可以用逗号分隔或使用参数数组。


支持Getters函数获取属性值(获取的属性有多个值则返回一个数组)。

动画 – $.fn.transition

你可以使用$.fn.transition()调用CSS3 transition功能来制作动画。其工作方式完全类似$.fn.animate(),只是它使用的是CSS3 transitions。


如同$.fn.animate(),调用时你可以设置动画时长(duration),淡出效果(easing)以及动画完成时的回调函数(complete)。

测试

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

  • 优点:只提供元素旋转功能。
  • 缺点:只有元素旋转功能。不支持过渡状态设置。

支持

  • Bugs and requests:通过本项目的issues tracker进行提交。
  • Questions:在StackOverflow上进行提问(请使用jquery-transit标签)。
  • Chat:在gitter.im上加入我们。

官方网站:http://ricostacruz.com/jquery.transit
开源地址:https://github.com/rstacruz/jquery.transit/

4 7 收藏

资源整理者简介:linacre

简介还没来得及写 :) 个人主页 · 贡献了3个资源


直接登录
最新评论

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1438 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer