Bagaimanakah Saya Boleh Menjeda dan Menyambung Animasi CSS3 Hanya Menggunakan JavaScript?

Jeda dan Sambung semula Animasi CSS3 dengan JavaScript

Masalah:

Cara untuk menjeda dan menyambung semula animasi CSS3 menggunakan JavaScript tanpa bergantung pada luaran perpustakaan?

Penyelesaian:

1. Animasi CSS:

Tentukan animasi menggunakan kerangka utama CSS, menentukan nilai kelegapan dan masa untuk setiap satu langkah.

2. Jeda dan Sambung semula Fungsi:

Buat fungsi JavaScript untuk mengendalikan jeda dan menyambung semula animasi:

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. Acara Pendengar:

Tambahkan pendengar acara pada elemen animasi untuk mencetuskan jeda dan sambung semula tindakan:

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

Nota Tambahan:

• Untuk memastikan animasi boleh dijeda beberapa kali, kosongkan pendengar acara sedia ada sebelum menambah baharu satu.
• Sebagai alternatif, gunakan pendekatan kelas CSS yang dicadangkan dalam jawapan yang disediakan:

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

Ini membolehkan anda menjeda dan menyambung semula animasi dengan hanya menogol CSS ini kelas tanpa memerlukan pendengar acara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjeda dan Menyambung Animasi CSS3 Hanya Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!