jQuery.animate
Rewrite the jQuery.animate's default behavior, The priority use CSS3 Transition to achieve animation.
Why use?
This plugin is the rewriting of jQuery.animate method, you do not need to consider modifying your code, you just need to include plug-in, can let all of your jQuery animation into CSS3 Transition.
Usage
Just include jquery.animate.js after jQuery.
AMD
require; ;
NPM
安装
$ npm install jquery.animate
引入
// ES6// CommonJSvar $ =
cssHook
Can be directly through the .css() method to set the Transform properties.
; //=> translate(100px, 0); //=> translate(0, 100%); //=> translate(200px, 100px); //=> translate(200px, 100px) translateZ(300px); //=> scale(2); //=> scale(3,1); //=> scaleZ(2); //=> scale(2,1.5) scaleZ(4); //=> rotate(30deg); //=> rotateX(45deg); //=> rotateX(1rad); //=> rotate(90deg); //=> rotateX(60deg) rotateY(30deg) rotate(90deg); //=> skewX(30deg); //=> skewY(60deg); //=> skewX(30deg) skewY(60deg)
Set perspective.
// Note the difference between; //=> perspective: 100px;; //=> transform: perspective(100px);
Read the attribute value.
; //=> '100px'; //=> ['100px', '200px']; //=> '3'; //=> ['3','1']
Support delete attributes.
; //=> 'translate(2px, 5px)'; //=> remove 'translate(2px, 5px)'; //=> 'scale(1, 3)'
animate
Support all jQuery.animate native writing.
;;; ;; ; ; ;
Transform properties also supports special writing.
; //=> scale(1,2); //=> rotateX(30deg) rotateY(20deg) rotate(90deg)
To support the animation of the composite properties.
;;;
Can perfect support .stop() and .finish() method.
;window;
;;console; //=> 200px
Can support color animation now, and you can use the .stop() method to stop to a color value.
;window;
Note that because of CSS3 Transition animation support only three times bezier curve, so some slow moving in jQuery.easing cannot support, such as: Bounce.
If use it does not support Easing, We will use the original jQuery.animate methods to achieve this animation.
Meanwhile, all the Transform property can not be separately set Easing, because their Transition through Transform property to set the.
So, if this happens, only the first Easing will serve as transition-timing-function.
Because in principle should be the priority compatible animation effects, so in this case, will use the original jQuery.animate ways to implement this animation.
;
CSS will be like this
The following is a list of transit support slow.
$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)';
Thanks
This plug-in is written in reference to the following plug-ins, thanks to the author!
jquery.transit
jQuery 2D transformations
jquery.animate-colors
jQuery Easing v1.3
jQuery requestAnimationFrame - v0.1.3pre