Bagaimana untuk Menghalang Peralihan CSS daripada Mencetuskan pada Muatan Halaman dalam Google Chrome?

Menghalang Peralihan CSS daripada Mencetuskan pada Pemuatan Halaman

Ramai pembangun web telah menghadapi isu di mana peralihan CSS tercetus semasa pemuatan halaman, menyebabkan elemen menjadi kilat sebelum mencapai keadaan terakhirnya. Tingkah laku ini amat ketara apabila menggunakan peralihan warna, kerana elemen pada mulanya berkelip kepada hitam sebelum beralih kepada warna yang dimaksudkan.

Isu ini berpunca daripada pepijat dalam Google Chrome yang mencetuskan peralihan apabila halaman mengandungi teg pada pengaki halaman. Kod:

  <script> </script>

Penyelesaian ini berkesan menghalang peralihan daripada menyala pada pemuatan halaman tanpa menjejaskan bahagian lain halaman.

Sebagai alternatif, anda boleh menggunakan peralihan kepada keadaan tuding dan menggunakan JavaScript untuk mencetuskan peralihan pada pemuatan halaman secara manual:

<code class="js">window.addEventListener("load", () => {
  const elements = document.querySelectorAll(".green");
  elements.forEach(element => element.classList.add("green-transition"));
});</code>

Ringkasnya, pepijat yang menyebabkan peralihan CSS dijalankan pada pemuatan halaman dalam Google Chrome boleh dikurangkan dengan menambahkan teg skrip kosong pada pengaki atau memulakan secara manual peralihan melalui JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Peralihan CSS daripada Mencetuskan pada Muatan Halaman dalam Google Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!