最近利用jquery开发touch版网站的时候,常用到jquery的动画效果。
如,slidedown animate等 动画函数。但在移动设备上测试会发现运动并不是很流畅。
因此想到改用wekkit原生css3属性,使效果流畅了很多。 通过改变translate 而不是改变 left 或者margin-left 来实现滑动,效率提升会很明显,平滑度几乎可以媲美native app。在对js执行效率不是很高的移动终端中尤为明显。但是css3的写法复杂繁琐,于是发现了jQuery Transit这个插件。
jQuery Transit 是一个利用了 CSS3 的过渡和转换特性来实现动画特效的 jQuery 插件,与 jQuery 的 animate 方法有着同样的语法。
此插件支持这个特性所提供的大部分方法,同时增加了 jQuery 独有的技术:回调(callbacks)、自动增加浏览器 CSS 前缀、链盒(chaining)等。由于此插件使用了真正的 CSS3 规则,所以它不能兼容旧版本的浏览器。移动设备的浏览器基本为webkit核心,IE就去屎吧。
压缩后只有2K,使用起来很好很方便。貌似兼容性有点不太好,我用ff9,竟然有些属性支持的不是很流畅。
有空研究研究不断完善吧。
官方地址:http://ricostacruz.com/jquery.transit/