Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FlexSlider uses Web Animations API for "slide" instead of $.animate() (#36987)

This commit is contained in:
Ron Rennick 2023-04-11 16:50:59 -03:00 committed by GitHub
parent 30536f636e 9ee2307b65
commit 450d9e9c8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/flexslider-css3-transitions Normal file
View File

@ -0,0 +1,4 @@
Significance: major
Type: update
FlexSlider always uses Web Animations API for "slide" animations.

61
plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js
View File

@ -8,6 +8,49 @@
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 = function(el, options) {
var slider = $(el);
@ -26,6 +69,7 @@
eventType = "click touchend keyup",
watchedEvent = "",
watchedEventClearTimer,
easing = easings[slider.vars.easing] || "ease",
vertical = slider.vars.direction === "vertical",
reverse = slider.vars.reverse,
carousel = (slider.vars.itemWidth > 0),
@ -660,8 +704,19 @@
}, slider.vars.animationSpeed + 100);
} else {
slider.container.animate(slider.args, slider.vars.animationSpeed, slider.vars.easing, function(){
slider.wrapup(dimension);
var prop = slider.prop;
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:
@ -996,7 +1051,7 @@
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
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"
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