jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡效果,而且动画平滑完美,这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的jQuery插件。
使用方法
只需要在页面中引入jQuery1.4+和 jquery.transit.js 文件。
<script src='jquery.js'></script> <script src='jquery.transit.js'></script>
$ bower install --save jquery.transit $ npm install --save jquery.transit
转换效果
你可以在这个jQuery插件中使用所有的CSS属性来设置元素转换动画效果。
$("#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' });
该插件还支持获取值Getters(如果获取的值是多个会返回一个数组)
$("#box").css('rotate'); //=> "30deg" $("#box").css('translate'); //=> ['60px', '30px']
动画 - $.fn.transition
你可以通过$.fn.transition()
来制作CSS3 transitions 动画。它的工作方式类似$.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()
那样在参数中使用duration
、easing
和 complete
。
$("#box").transition({ opacity: 0.1, scale: 0.3, duration: 500, easing: 'in', complete: function() { /* ... */ } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!