FlexSlider uses Web Animations API for "slide" instead of $.animate() (#36987)
This commit is contained in:
commit
450d9e9c8c
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: major
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
FlexSlider always uses Web Animations API for "slide" animations.
|
|
@ -8,6 +8,49 @@
|
||||||
|
|
||||||
var focused = true;
|
var focused = true;
|
||||||
|
|
||||||
|
// When wishing to use jQuery transitions, we replicate them with CSS3's transition-timing-function instead
|
||||||
|
// Default options provided by jQuery are "swing" and "linear"; jQuery easing plugin methods: https://easings.net/
|
||||||
|
// We do NOT support easeInElastic, easeOutElastic, easeInOutElastic, easeInBounce, easeOutBounce, and easeInOutBounce
|
||||||
|
var easings = {
|
||||||
|
swing: 'cubic-bezier(.02, .01, .47, 1)', // https://stackoverflow.com/a/9245729
|
||||||
|
linear: 'linear',
|
||||||
|
|
||||||
|
easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)', // https://easings.net/#easeInQuad
|
||||||
|
easeOutQuad: 'cubic-bezier(0.5, 1, 0.89, 1)', // https://easings.net/#easeOutQuad
|
||||||
|
easeInOutQuad: 'cubic-bezier(0.45, 0, 0.55, 1)', // https://easings.net/#easeInOutQuad
|
||||||
|
|
||||||
|
easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)', // https://easings.net/#easeInCubic
|
||||||
|
easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)', // https://easings.net/#easeOutCubic
|
||||||
|
easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)', // https://easings.net/#easeInOutCubic
|
||||||
|
|
||||||
|
easeInQuart: 'cubic-bezier(0.5, 0, 0.75, 0)', // https://easings.net/#easeInQuart
|
||||||
|
easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)', // https://easings.net/#easeOutQuart
|
||||||
|
easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)', // https://easings.net/#easeInOutQuart
|
||||||
|
|
||||||
|
easeInQuint: 'cubic-bezier(0.64, 0, 0.78, 0)', // https://easings.net/#easeInQuint
|
||||||
|
easeOutQuint: 'cubic-bezier(0.22, 1, 0.36, 1)', // https://easings.net/#easeOutQuint
|
||||||
|
easeInOutQuint: 'cubic-bezier(0.83, 0, 0.17, 1)', // https://easings.net/#easeInOutQuint
|
||||||
|
|
||||||
|
easeInSine: 'cubic-bezier(0.12, 0, 0.39, 0)', // https://easings.net/#easeInSine
|
||||||
|
easeOutSine: 'cubic-bezier(0.61, 1, 0.88, 1)', // https://easings.net/#easeOutSine
|
||||||
|
easeInOutSine: 'cubic-bezier(0.37, 0, 0.63, 1)', // https://easings.net/#easeInOutSine
|
||||||
|
|
||||||
|
easeInExpo: 'cubic-bezier(0.7, 0, 0.84, 0)', // https://easings.net/#easeInExpo
|
||||||
|
easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)', // https://easings.net/#easeOutExpo
|
||||||
|
easeInOutExpo: 'cubic-bezier(0.87, 0, 0.13, 1)', // https://easings.net/#easeInOutExpo
|
||||||
|
|
||||||
|
easeInCirc: 'cubic-bezier(0.55, 0, 1, 0.45)', // https://easings.net/#easeInCirc
|
||||||
|
easeOutCirc: 'cubic-bezier(0, 0.55, 0.45, 1)', // https://easings.net/#easeOutCirc
|
||||||
|
easeInOutCirc: 'cubic-bezier(0.85, 0, 0.15, 1)', // https://easings.net/#easeInOutCirc
|
||||||
|
|
||||||
|
easeInBack: 'cubic-bezier(0.36, 0, 0.66, -0.56)', // https://easings.net/#easeInBack
|
||||||
|
easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // https://easings.net/#easeOutBack
|
||||||
|
easeInOutBack: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)' // https://easings.net/#easeInOutBack
|
||||||
|
};
|
||||||
|
|
||||||
|
// Preserve the original jQuery "swing" easing as "jswing"
|
||||||
|
easings['jswing'] = easings['swing'];
|
||||||
|
|
||||||
//FlexSlider: Object Instance
|
//FlexSlider: Object Instance
|
||||||
$.flexslider = function(el, options) {
|
$.flexslider = function(el, options) {
|
||||||
var slider = $(el);
|
var slider = $(el);
|
||||||
|
@ -26,6 +69,7 @@
|
||||||
eventType = "click touchend keyup",
|
eventType = "click touchend keyup",
|
||||||
watchedEvent = "",
|
watchedEvent = "",
|
||||||
watchedEventClearTimer,
|
watchedEventClearTimer,
|
||||||
|
easing = easings[slider.vars.easing] || "ease",
|
||||||
vertical = slider.vars.direction === "vertical",
|
vertical = slider.vars.direction === "vertical",
|
||||||
reverse = slider.vars.reverse,
|
reverse = slider.vars.reverse,
|
||||||
carousel = (slider.vars.itemWidth > 0),
|
carousel = (slider.vars.itemWidth > 0),
|
||||||
|
@ -660,8 +704,19 @@
|
||||||
}, slider.vars.animationSpeed + 100);
|
}, slider.vars.animationSpeed + 100);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
slider.container.animate(slider.args, slider.vars.animationSpeed, slider.vars.easing, function(){
|
var prop = slider.prop;
|
||||||
slider.wrapup(dimension);
|
slider.container.each(function() {
|
||||||
|
var container = this;
|
||||||
|
var keyframes = {};
|
||||||
|
keyframes[prop] = [
|
||||||
|
window.getComputedStyle(container)[prop],
|
||||||
|
slider.args[prop]
|
||||||
|
];
|
||||||
|
|
||||||
|
container.animate(keyframes, { duration: slider.vars.animationSpeed, easing: easing }).onfinish = function() {
|
||||||
|
container.style[prop] = slider.args[prop];
|
||||||
|
slider.wrapup(dimension);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else { // FADE:
|
} else { // FADE:
|
||||||
|
@ -996,7 +1051,7 @@
|
||||||
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
|
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
|
||||||
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
|
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
|
||||||
animation: "fade", //String: Select your animation type, "fade" or "slide"
|
animation: "fade", //String: Select your animation type, "fade" or "slide"
|
||||||
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
|
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. Most jQuery easing plugin methods are supported!
|
||||||
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
|
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
|
||||||
reverse: false, //{NEW} Boolean: Reverse the animation direction
|
reverse: false, //{NEW} Boolean: Reverse the animation direction
|
||||||
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
|
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
|
||||||
|
|
Loading…
Reference in New Issue