fix animation issues caused by window hiding

This commit is contained in:
rzen 2020-09-10 19:35:10 -04:00
parent 1cdd6a3fd0
commit 3de7d3b62e

View File

@ -1,11 +1,16 @@
(function () { (function () {
var hidden = function () {
return document.hidden || document.msHidden || document.webkitHidden;
}
// "hydrate" div.gallery with play/pause and nav behaviors // "hydrate" div.gallery with play/pause and nav behaviors
var process_gallery = function (g) { var process_gallery = function (g) {
var var
// milliseconds to wait before switch to next slide // milliseconds to wait before switch to next slide
NEXT_SLIDE_TIMEOUT = 3000; NEXT_SLIDE_TIMEOUT = 5000;
var var
// will be resized to the height of currently selected image
images_container = g.querySelector('.images'), images_container = g.querySelector('.images'),
// images in this gallery // images in this gallery
@ -45,18 +50,18 @@
if (selected_index === index) return; if (selected_index === index) return;
var slide = function () { var slide = function () {
images[selected_index].removeEventListener('transitionend', slide);
images[selected_index].classList.remove('transition'); images[selected_index].classList.remove('transition');
images[index].classList.remove('transition'); images[index].classList.remove('transition');
navs[index].classList.add('selected');
navs[selected_index].classList.remove('selected'); navs[selected_index].classList.remove('selected');
selected_index = index; selected_index = index;
} }
images[selected_index].addEventListener('transitionend', slide); if (hidden()) return;
images[selected_index].addEventListener('transitionend', slide, {once: true});
navs[index].classList.add('selected');
if (index < selected_index) { if (index < selected_index) {
setTimeout(function () { setTimeout(function () {
@ -97,6 +102,7 @@
// show next image // show next image
var next_image = function () { var next_image = function () {
if (hidden()) return;
if (selected_index >= images.length-1) { if (selected_index >= images.length-1) {
select_image(0); select_image(0);
} else { } else {