取代jQuery animate的transit.min.js

在jQuery中的animate我们都知道可以实现过渡效果，但是不支持css3的某些过渡属性，例如transform下的属性。所以不得不借助第三方插件。

之前介绍过能够取代jQuery的animate效果的插件是velocity.js，功能很强大还扩展了一些功能不只是animate，但是只仅仅想取代jQuery animate功能而已推荐使用transit.min.js。

目前的版本是：

jQuery: v1.8.3
Transit: v0.9.12

中文网站：http://code.ciaoca.com/jquery/transit/

官方网站：http://ricostacruz.com/jquery.transit/

x (px)
y (px)
translate (x, y)
rotate (deg)
rotateX (deg)
rotateY (deg)
rotate3d (x, y, z, deg)
scale (x, [y])
perspective (px)
skewX (deg)
skewY (deg)

基本用法：
$("#box").transition({ 
  opacity: 0.1, 
  scale: 0.3, 
  duration: 500, 
  easing: 'linear', 
  complete: function(){//回调函数} 
});

设置值：
$("#box").css({ x: '30px'}); // translate(30px,0)向右移动 
$("#box").css({ y: '60px'}); // translate(0,60px)向下移动 
$("#box").css({ translate: [60, 30]}); // 向右下移动 
$("#box").css({ rotate: '30deg'}); // 顺时针旋转 
$("#box").css({ scale: 2}); // 放大2倍 (200%) 
$("#box").css({ scale: [2, 1.5]}); // 宽度和高度不同的放大 
$("#box").css({ skewX: '30deg'}); // 水平斜切 
$("#box").css({ skewY: '30deg'}); // 垂直斜切 
$("#box").css({ perspective: 100, rotateX: 30}); // Webkit 3d 旋转 
$("#box").css({ rotateY: 30}); 
$("#box").css({ rotate3d: [1, 1, 0, 45]});

累加：
$("#box").css({ rotate: '+=30' }); // 增加30度 
$("#box").css({ rotate: '-=30' }); // 减少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']

$("#box").css('translate').split(',')[0] //=>60px
$("#box").css('translate').split(',')[1]  //=>30px

与jquery写法一样：
$("#box").transition({ opacity: 0.1, scale: 0.3 }); 
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // 动画时长 
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing'); // 缓动效果 
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear'); // 动画时长 + 缓动效果 
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){}); // 回调函数 
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){}); // 任意