重写了 jQuery.animate 的默认行为，使它优先使用 CSS3 Transition 来实现动画。
这个插件是对 jQuery.animate 方法的改写，你不需要考虑修改你的代码，你只需要导入插件，就可以让你所有的 jQuery 动画转化为 CSS3 Transition。
将 jquery.animate.js 引在 jQuery 之后。
<script src="jquery.js"></script>
<script src="jquery.animate.js"></script>require.config({
paths: {
'jquery': 'jquery.min',
'jquery.animate': 'jquery.animate.min',
}
});
require(['jquery.animate'], function($) {
// ...
});安装
$ npm install jquery.animate
引入
// ES6
import $ from 'jquery.animate'
// CommonJS
var $ = require('jquery.animate')可以直接通过 .css() 方法来设置 Transform 属性。
$(elem).css({ x: '100px' }); //=> translate(100px, 0)
$(elem).css({ y: '100%' }); //=> translate(0, 100%)
$(elem).css({ translate: [200,100] }); //=> translate(200px, 100px)
$(elem).css({ translate3d: [200,100,300] }); //=> translate(200px, 100px) translateZ(300px)
$(elem).css({ scale: 2 }); //=> scale(2)
$(elem).css({ scaleX: 3 }); //=> scale(3,1)
$(elem).css({ scaleZ: 2 }); //=> scaleZ(2)
$(elem).css({ scale3d: [2, 1.5, 4] }); //=> scale(2,1.5) scaleZ(4)
$(elem).css({ rotate: '30deg' }); //=> rotate(30deg)
$(elem).css({ rotateX: 45 }); //=> rotateX(45deg)
$(elem).css({ rotateY: '1rad' }); //=> rotateX(1rad)
$(elem).css({ rotateZ: 90 }); //=> rotate(90deg)
$(elem).css({ rotate3d: [60,30,90] }); //=> rotateX(60deg) rotateY(30deg) rotate(90deg)
$(elem).css({ skewX: '30deg' }); //=> skewX(30deg)
$(elem).css({ skewY: 60 }); //=> skewY(60deg)
$(elem).css({ skew: [30,60] }); //=> skewX(30deg) skewY(60deg)设置透视点。
// Note the difference between
$(elem).css({ 'perspective': 100 }); //=> perspective: 100px;
$(elem).css({ 'pers': 100 }); //=> transform: perspective(100px);读取属性值。
$(elem).css({ x: 100 }).css('x'); //=> '100px'
$(elem).css({ x: 100, y: 200 }).css('translate'); //=> ['100px', '200px']
$(elem).css({ scaleX: 3, scaleY: 3 }).css('scale'); //=> '3'
$(elem).css({ scaleX: 3 }).css('scale'); //=> ['3','1']支持删除属性。
$(elem).css({ translate: '2, 5' }); //=> 'translate(2px, 5px)'
$(elem).css({ translate: '' }); //=> remove 'translate(2px, 5px)'
$(elem).css({ scale: '2,3' }).css({ scaleX: '' }); //=> 'scale(1, 3)'支持 jQuery.animate 原生的所有写法。
$(elem).hide(2000);
$(elem).hide().slideDown(2000, 'easeOutBack');
$(elem).hide().fadeIn(2000, function() { ... });
$(elem).animate({left: 100});
$(elem).animate({x: 200}, 1000, 'easeOutBack', function() { ... });
$(elem).animate({opacity: 0},{
queue: false,
duration: 2000,
easing: 'linear'
});
$(elem).animate({
left: [100, 'linear'],
top: [200, 'easeOutBack'],
scale: [[2,3], 'easeInBack']
});
$(elem).animate({
left: 100,
top: 200
},{
queue: false,
duration: 2000,
specialEasing: {
left: 'linear',
top: 'easeOutBack'
}
});Transform 属性还支持特殊的写法。
$(elem).animate({ 'scale': [1, 2] }); //=> scale(1,2)
$(elem).animate({ 'rotate3d': '30,20,90' }); //=> rotateX(30deg) rotateY(20deg) rotate(90deg)支持复合属性的动画。
$(elem).animate({ 'border-radius': '10px 20px 30px 40px' });
$(elem).animate({ 'transform-origin': '100px 300px' });
$(elem).animate({ 'box-shadow': 'inset 50px 50px 1px #000'});可以完美支持 .stop() 以及 .finish() 方法。
$(elem).animate({ x: 200 }, 2000, 'easeInOutBack');
window.setTimeout(function() {
$(elem).stop();
console.log($(elem).css('x')); //=> ≈ 122.82226813307604px
}, 1000);$(elem).animate({ x: 200 }, 2000, 'easeInOutBack');
$(elem).finish();
console.log($(elem).css('x')); //=> 200px现在可以支持颜色动画了，并且可以使用 .stop() 方法停止到某个颜色值。
$('div')
.css('background-color', 'white')
.animate({ 'background-color': 'black' }, 3000);
window.setTimeout(function() {
$(elem).stop();
console.log($(elem).css('background-color')); //=> ≈ rgb(107, 107, 107)
}, 1000);注意，由于 CSS3 Transition 动画的只支持三次贝塞尔曲线，因此jQuery.easing中的某些缓动无法支持，比如：Bounce。
如果使用了它不支持的 Easing，那么将会使用原来的 jQuery.animate 方法来实现该动画。
同时，所有的 Transform 属性不能分别设置 Easing，因为他们的 Transition 都是通过 Transform 属性来设置的。
因此，如果发生这种情况，那么只有第一个 Easing 将作为 transition-timing-function。
因为原则上应该优先兼容动画效果，因此这种情况下，将会使用原来的 jQuery.animate 方法来实现该动画。
$(elem).animate({
x: [300, 'easeOutBack'],
y: [200, 'linear'],
scale: [3, 'easeInBack']
});CSS会是这样
element.style {
transform: translate(300px, 200px) scale(3);
transition: transform 2000ms easeOutBack;
}以下是插件支持的缓动列表。
$.cssEase = {
'_default': 'swing',
'swing': 'easeOutQuad', // 和 jQuery Easing 相同，查看详情 https://github.com/gdsmith/jquery.easing
'linear': 'cubic-bezier(0,0,1,1)',
'ease': 'cubic-bezier(.25,.1,.25,1)',
'easeIn': 'cubic-bezier(.42,0,1,1)',
'easeOut': 'cubic-bezier(0,0,.58,1)',
'easeInOut': 'cubic-bezier(.42,0,.58,1)',
'easeInCubic': 'cubic-bezier(.550,.055,.675,.190)',
'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
};这个插件是参考以下插件编写的，感谢作者！
jquery.transit
jQuery 2D transformations
jquery.animate-colors
jQuery Easing v1.3
jQuery requestAnimationFrame - v0.1.3pre
