Automain leret berhenti jika anda menukar tab atau meminimumkan penyemak imbas

Question

Saya membuat kemajuan automain untuk peluncur menggunakan CSS. Apabila kelas aktiviti ditambahkan pada penomboran, saya menjalankan animasi CSS yang bertahan selagi kelewatan automain gelangsar. Semuanya akan berfungsi dengan baik jika anda tidak menukar tab penyemak imbas atau meminimumkan penyemak imbas. Sebaik sahaja kami menukar tab, automain gelangsar berhenti seketika dan menyebabkan animasi berhenti. Mungkin ada yang tahu bagaimana untuk mempengaruhinya?

import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';

const heroSwiper = new Swiper('.hero__swiper', {
  modules: [Navigation, Pagination, Autoplay],
  autoplay: {
    delay: 5000,
    waitForTransition: false,
    disableOnInteraction: false,
  },
  slidesPerView: 1,
  speed: 800,
  grabCursor: true,
  navigation: {
    prevEl: '.hero__navigation-button--prev',
    nextEl: '.hero__navigation-button--next',
  },
  pagination: {
    clickable: true,
    el: '.hero__swiper-pagination',
    renderBullet: (i, className) => {
      return `<button class="${className}">${(`0${i + 1}`).slice(-2)}</button>`;
    },
    type: 'bullets',
  },
});

&__swiper-pagination {
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    display: inline-flex !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;

    .swiper-pagination-bullet {
      position: relative;
      display: inline-flex;
      width: auto !important;
      height: auto !important;
      margin: 0 24px 0 0 !important;
      color: #605647;
      font-size: 16px;
      line-height: 20px;
      background: none !important;
      border-radius: 0 !important;
      opacity: 1 !important;
      transition: 0.8s !important;
      pointer-events: all;

      &::before {
        position: absolute;
        top: 50%;
        left: 35px;
        width: 75px;
        height: 1px;
        background: rgba(#fff, 0.3);
        transform: translateY(-50%);
        visibility: hidden;
        opacity: 0;
        transition: 0.8s;
        content: "";
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 35px;
        width: 0;
        height: 1px;
        background: rgba(#fff, 1);
        transform: translateY(-50%);
        visibility: hidden;
        opacity: 0;
        transition: 0.8s;
        content: "";
      }

      &.swiper-pagination-bullet-active {
        margin-right: 110px !important;
        color: #fff;

        &:last-child {
          margin-right: 0 !important;
        }

        &::before {
          visibility: visible;
          opacity: 1;
        }

        &::after {
          visibility: visible;
          opacity: 1;
          animation: pagination-progress 5s linear;
        }
      }

      &:last-child {
        margin: 0 !important;
      }
    }
  }


@keyframes pagination-progress {
  0% {
    width: 0;
  }

  100% {
    width: 75px;
  }
}

UPD Penyelesaian masalah:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    /* Since swiper is still running in the background and only restarts 
    the animation when the user returns to the tab, it was decided to delete the class. */
    if (document.querySelector('.swiper-pagination-bullet-active')) {
      document.querySelector('.swiper-pagination-bullet-active').classList.remove('swiper-pagination-bullet-active');
    }

    // Without timeout the css animation does not start
    setTimeout(() => {
      document.querySelectorAll('.swiper-pagination-bullet')[heroSwiper.activeIndex].classList.add('swiper-pagination-bullet-active');
    }, 10);
  } else {
    document.querySelector('.swiper-pagination-bullet-active').classList.remove('swiper-pagination-bullet-active');
  }
});

Terima kasih Xena Lesenkova

Answer 1

Peluncur leret kelihatan menjeda automain selepas bertukar antara tab penyemak imbas. Apabila anda kembali, ia akan memulakan semula memaparkan slaid semasa sekali lagi. Cuba mulakan semula animasi kemajuan apabila tab dengan peluncur kelihatan.

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        // restart animate progress
    } else {
       // stop animate progress
    }
})