Cara Menangkap Acara Animasi CSS3 di JavaScript

mata utama

JavaScript boleh menguruskan animasi CSS3 dengan menambahkan pengendali acara ke unsur -unsur, membolehkan kawalan animasi yang baik, seperti memainkannya dalam urutan. Terdapat tiga jenis peristiwa yang boleh ditangkap: "AnimationStart", "AnimationItration", dan "AnimationEnd".
Keserasian penyemak imbas peristiwa animasi ini dapat dicapai dengan memanggil
• untuk semua nama prefixed dan unprefixed menggunakan fungsi tersuai. Ini membolehkan pengendali acara ditugaskan menggunakan garis kod. addEventListener
Objek acara yang disampaikan kepada fungsi pendengar animasi menyediakan nama animasi dan masa berlalu sejak permulaan animasi. Ini boleh digunakan untuk mengesan apabila animasi tertentu berakhir dan melaksanakan kod lain, seperti menggunakan animasi CSS3 yang lain dalam urutan tertentu.

animasi CSS3 adalah lancar dan mudah dilaksanakan, tetapi tidak seperti JavaScript, ia tidak mempunyai kawalan bingkai-bingkai. Nasib baik, anda boleh memohon pengendali acara ke mana -mana elemen untuk menentukan keadaan animasi. Ini membolehkan kawalan halus, seperti bermain animasi yang berbeza mengikut urutan.

Pertimbangkan animasi CSS3 mudah ini:

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>

Apabila kelas

digunakan untuk elemen dengan id enable, animasi bernama anim akan berjalan tiga kali. Setiap lelaran berlangsung sekejap, di mana elemen itu memudar dan kemudian memudar. flash

Tiga jenis peristiwa akan dicetuskan apabila animasi berlaku:

animationstart Acara

<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

dipecat apabila animasi pertama kali dimulakan.

animationstart

Acara animationiteration

dipecat pada permulaan setiap lelaran animasi baru, iaitu setiap lelaran kecuali lelaran pertama.

<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>

animationiteration

animationend Kebakaran acara pada akhir animasi.

<code class="language-javascript">anim.addEventListener("animationend", AnimationListener, false);</code>

Keserasian penyemak imbas animationend

Pada masa penulisan, Firefox, Chrome, Safari, Opera, dan IE10 menyokong animasi CSS3 dan pengendali acara yang berkaitan. Selain itu, pelayar Opera, IE10, dan WebKit menggunakan awalan dan telah membuat beberapa perubahan kes untuk memastikan kebocoran ... W3C Standard Firefox Webkit Opera IE10 3 3 3

Cara paling mudah untuk menyelesaikan masalah awalan adalah menggunakan fungsi tersuai untuk memanggil semua nama prefixed dan unprefixed

:

animationstart pengendali acara silang penyemak imbas kini boleh ditugaskan menggunakan garis kod: animationstart

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>

objek acara

Dalam kod di atas, fungsi AnimationListener dipanggil apabila peristiwa animasi berlaku. Objek acara diluluskan sebagai parameter tunggal. Sebagai tambahan kepada sifat dan kaedah standard, ia juga menyediakan:

• animationName: nama animasi CSS3 (iaitu flash)
• elapsedTime: masa (dalam saat) sejak permulaan animasi.

Oleh itu, kita dapat mengesan apabila animasi

berakhir, contohnya: flash

<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

Sebagai contoh, kod itu boleh mengeluarkan kelas yang sedia ada atau memohon animasi CSS3 yang lain dalam urutan tertentu.

Lihat Demonstrasi Acara Animasi CSS3 di JavaScript

Halaman Demo memaparkan butang. Apabila anda mengkliknya, kelas "Enable" ditukar, dengan itu memulakan animasi

. Apabila peristiwa animasi dicetuskan, status dipaparkan dalam konsol. Selepas animasi selesai, kelas "Enable" akan dikeluarkan supaya butang boleh diklik lagi. flash

Jika anda menggunakan penangkapan acara animasi dalam mana -mana projek yang menarik, sila beritahu saya.

(Jika anda suka membaca artikel ini, anda akan suka dipelajari; di sinilah untuk mempelajari kemahiran dan kemahiran baru dari tuan. Ahli-ahli boleh mengakses semua e-buku dan kursus dalam talian interaktif SitePoint, seperti "HTML5 dan CSS3 untuk dunia nyata)

(komen untuk artikel ini ditutup. Adakah terdapat soalan mengenai CSS? Mengapa tidak bertanya di forum kami?)

Soalan Lazim (FAQ) Mengenai Animasi CSS3 dan Pengendali Acara JavaScript

Apakah animasi CSS3 dan pengendali acara JavaScript?

Animasi CSS3 adalah ciri CSS3 (cascading stylesheets) yang membolehkan anda menghidupkan elemen HTML tanpa menggunakan JavaScript atau Flash. Ia menyediakan cara untuk membuat animasi mudah secara langsung dalam kod CSS tanpa sebarang sumber tambahan. Sebaliknya, pengendali acara JavaScript adalah fungsi dalam JavaScript yang mencetuskan apabila peristiwa tertentu berlaku. Acara -acara ini boleh menjadi sebarang peristiwa seperti pengguna yang mengklik butang, memuatkan halaman, atau mengakhiri animasi. Gunakan animasi CSS3 dan pengendali acara JavaScript untuk membuat kandungan web interaktif dinamik.

Bagaimana menggunakan pengendali acara JavaScript dengan animasi CSS3?

Untuk menggunakan pengendali acara JavaScript dengan animasi CSS3, anda perlu menambah pendengar acara ke elemen HTML yang anda mahu bernyawa. Pendengar acara ini akan mencetuskan fungsi JavaScript pada akhir animasi. Berikut adalah contoh asas:

<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>

Dalam kod ini, "AnimationEnd" adalah acara yang kita dengar, yang kebakaran ketika animasi CSS3 selesai.

Bolehkah saya menggunakan pengendali acara JavaScript dengan peralihan CSS3?

Ya, anda boleh menggunakan pengendali acara JavaScript dengan peralihan CSS3 seperti yang anda lakukan dengan animasi CSS3. Acara yang perlu anda dengar ialah "Transitionend". Acara ini dipecat selepas peralihan CSS selesai.

Bagaimana menggunakan JavaScript untuk mengawal masa animasi CSS3?

Anda boleh menggunakan JavaScript untuk mengawal masa animasi CSS3 menggunakan harta "animasi-delay". Harta ini menetapkan kelewatan pada permulaan animasi. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-css">#anim.enable {
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* 动画 */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}</code>

Dalam kod ini, animasi akan bermula selepas halaman dimuatkan selama 2 saat.

Bagaimana untuk mengulangi animasi CSS3 menggunakan JavaScript?

Anda boleh mengulangi animasi CSS3 menggunakan JavaScript menggunakan harta "animasi-iitasi". Harta ini menentukan bilangan kali animasi harus dimainkan. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>

Dalam kod ini, animasi akan diulangi selama -lamanya.

Bolehkah saya menukar kelajuan animasi CSS3 menggunakan JavaScript?

Ya, anda boleh menukar kelajuan animasi CSS3 menggunakan JavaScript. Hartanah "animasi" mengawal tempoh masa yang diperlukan untuk animasi untuk menyelesaikan kitaran. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>

Dalam kod ini, animasi akan berlangsung selama 2 saat.

Bagaimana untuk menjeda dan memulihkan animasi CSS3 menggunakan JavaScript?

Anda boleh menjeda dan memulihkan animasi CSS3 menggunakan JavaScript menggunakan harta "animasi-play-state". Harta ini menetapkan sama ada animasi berjalan atau dijeda. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-javascript">anim.addEventListener("animationend", AnimationListener, false);</code>

Dalam kod ini, animasi akan dijeda.

Bolehkah saya menukar orientasi animasi CSS3 menggunakan JavaScript?

Ya, anda boleh menukar orientasi animasi CSS3 anda menggunakan JavaScript. Hartanah "animasi-arah" mentakrifkan sama ada animasi harus dimainkan secara terbalik semasa kitaran bergantian. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-javascript">var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
    }
}</code>

Dalam kod ini, animasi akan dimainkan ke belakang.

Bagaimana menggunakan JavaScript untuk mengesan akhir animasi CSS3?

Anda boleh menggunakan JavaScript untuk mengesan akhir animasi CSS3 dengan menambahkan pendengar acara ke acara "AnimationEnd". Acara ini dipecat selepas animasi CSS3 selesai. Inilah caranya:

<code class="language-javascript">// 动画侦听器事件
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);</code>

Bolehkah saya menukar fungsi animasi animasi animasi CSS3 menggunakan JavaScript?

Ya, anda boleh menukar "animasi-masa-fungsi" animasi CSS3 menggunakan JavaScript. Harta ini menentukan lengkung halaju animasi. Anda boleh menetapkan harta ini dalam JavaScript seperti ini:

<code class="language-javascript">if (e.animationName == "flash" &&
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}</code>

Dalam kod ini, animasi akan bermula dengan perlahan dan kemudian mempercepatkan.

Atas ialah kandungan terperinci Cara Menangkap Acara Animasi CSS3 di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!