Mengapa Animasi Slaid Saya Tidak Berfungsi Semasa Cuba Mencipta Kesan Fade Out dalam CSS?

Peralihan CSS3: Kesan Fade Out

Apabila cuba melaksanakan kesan fade out menggunakan CSS tulen, ia mungkin mengelirukan mengapa animasi slaid tidak akan berfungsi. Inilah sebabnya:

Kunci kepada kesan fade out terletak pada peralihan sifat kelegapan. Sifat teratas, yang digunakan untuk animasi slaid, tidak akan menghasilkan kesan yang diingini.

Kesan Fade Out menggunakan Peralihan CSS3

Berikut ialah contoh cara untuk mencapai kesan pudar menggunakan peralihan CSS3:

<code class="css">.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}</code>

Apabila kelas ini digunakan pada elemen, ia akan pudar secara beransur-ansur dalam tempoh 2 saat.

Sumber Tambahan:

• [Peralihan CSS3: fadeIn dan fadeOut seperti kesan](https://css-tricks.com/css3-transition-fadein-fadeout/)

Memahami Perbezaan:

Perbezaan utama antara animasi pudar dan slaid terletak pada sifat yang sedang dialihkan. Untuk kesan fade out, ia ialah sifat kelegapan, manakala untuk animasi slaid, ia biasanya merupakan sifat kedudukan seperti atas atau kiri.

Dalam kes kod yang disediakan, animasi ditetapkan untuk mengubah sifat teratas , yang akan mengalihkan elemen dari skrin dan bukannya memudarkannya.

Atas ialah kandungan terperinci Mengapa Animasi Slaid Saya Tidak Berfungsi Semasa Cuba Mencipta Kesan Fade Out dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!