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

CSS3 transitions for all fade animations (#37692) 

* CSS3 transitions for all fade animations

* Changelog

* Whitespace

* Formatting

* Lambda function

* Comment

* Clean up transitionEnd event listeners if (!touch)

* Update this.offsetWidth comment

* Use jQuery methods in order to greatly reduce diff
This commit is contained in:
Atanas Penchev 2023-12-06 18:44:26 +02:00 committed by GitHub
parent 62e094e554
commit bf87c09969
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,4 @@
Significance: major
Type: update
FlexSlider "fade" animations always use CSS3 transitions.

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

@ -720,12 +720,16 @@
});
}
} else { // FADE:
// if (!touch) calls slider.wrapup() on fade animation end; if (touch) calls slider.wrapup() immediately
if (!touch) {
slider.slides.eq(slider.currentSlide).css({"zIndex": 1}).animate({"opacity": 0}, slider.vars.animationSpeed, slider.vars.easing);
slider.slides.eq(target).css({"zIndex": 2}).animate({"opacity": 1}, slider.vars.animationSpeed, slider.vars.easing, slider.wrapup);
} else {
slider.slides.eq(slider.currentSlide).css({ "opacity": 0, "zIndex": 1 });
slider.slides.eq(target).css({ "opacity": 1, "zIndex": 2 });
slider.slides.eq(slider.currentSlide).off("transitionend");
slider.slides.eq(target).off("transitionend").on("transitionend", slider.wrapup);
}
slider.slides.eq(slider.currentSlide).css({ "opacity": 0, "zIndex": 1 });
slider.slides.eq(target).css({ "opacity": 1, "zIndex": 2 });
if (touch) {
slider.wrapup(dimension);
}
}
@ -896,12 +900,15 @@
}
if (type === "init") {
if (!touch) {
//slider.slides.eq(slider.currentSlide).fadeIn(slider.vars.animationSpeed, slider.vars.easing);
// Every "opacity" change before outerWidth() does NOT get animated; every "opacity" change after outerWidth() becomes a fadeIn
if (slider.vars.fadeFirstSlide == false) {
slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).css({"opacity": 1});
slider.slides.outerWidth();
} else {
slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).animate({"opacity": 1},slider.vars.animationSpeed,slider.vars.easing);
slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).outerWidth();
slider.slides.eq(slider.currentSlide).css({"zIndex": 2}).css({"opacity": 1});
}
slider.slides.css({ "transition": "opacity " + slider.vars.animationSpeed / 1000 + "s " + easing });
} else {
slider.slides.css({ "opacity": 0, "display": "block", "transition": "opacity " + slider.vars.animationSpeed / 1000 + "s ease", "zIndex": 1 }).eq(slider.currentSlide).css({ "opacity": 1, "zIndex": 2});
}