fix animation issues caused by window hiding
This commit is contained in:
parent
1cdd6a3fd0
commit
3de7d3b62e
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user