可替代CSS3 transition和transform的jQuery插件

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 和 npm 来安装：

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