Mempermudahkan Animasi Kemasukan dengan @gaya permulaan

Mencipta animasi kemasukan yang lancar boleh menjadi mencabar. Kerumitan masa pemuatan DOM dan animasi daripada display: none selalunya membawa kepada hasil yang mengecewakan. Peraturan @starting-style menawarkan penyelesaian yang diperkemas dengan membenarkan anda mentakrifkan nilai awal secara eksplisit untuk sifat CSS apabila elemen mula-mula muncul, memastikan peralihan yang lancar dari permulaan.

Terokai artikel penuh dengan lebih banyak contoh di sini.

---

Memahami Asas

@starting-style menetapkan keadaan awal sifat CSS anda sebelum elemen itu kelihatan—keadaan "sebelum"nya. Keadaan "selepas" ditakrifkan dalam peraturan CSS standard anda. Begini caranya:

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

Setelah dimuatkan awal, @starting-style menetapkan kelegapan elemen kepada 0. Ia kemudian dengan lancar beralih ke keadaan akhir (kelegapan: 1 dalam kes ini). Kefungsian ini juga digunakan apabila elemen beralih daripada display: none kepada kelihatan, menjadikannya sempurna untuk menganimasikan elemen togol.

Menggunakan @starting-style

Anda boleh menggunakan @starting-style dalam dua cara: bersarang dalam set peraturan elemen (tiada pemilih diperlukan) atau ditakrifkan secara berasingan dengan pemilih.

Nota Penting: Bersarang @starting-style dalam unsur pseudo (seperti ::before atau ::after) tidak akan berfungsi seperti yang dimaksudkan. Gaya akan mempengaruhi elemen induk, bukan unsur pseudo.

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

Pertimbangan Utama: @starting-style dan "peraturan asal" mempunyai kekhususan yang sama. Untuk aplikasi yang boleh dipercayai, sentiasa letakkan @starting-style at-rule selepas "peraturan asal."

Aplikasi Praktikal

@starting-style cemerlang dalam mencipta kesan kemasukan dan peralihan. Pertimbangkan penggunaannya untuk memudar dalam teks pada pemuatan halaman atau menghidupkan pop timbul dan dialog. Berikut ialah beberapa contoh:

Menghidupkan daripada display: none

Faedah utama @starting-style ialah keupayaannya untuk mencipta peralihan yang lancar untuk elemen yang pada mulanya tersembunyi, terutamanya yang beralih daripada display: none. Tanpa @starting-style, menganimasikan peralihan ini adalah sukar kerana kekurangan keadaan permulaan yang ditentukan. @starting-style menyelesaikannya dengan menyediakan keadaan awal itu.

Elemen dialog memberikan ilustrasi yang jelas. Badannya bertukar-tukar antara display: none dan display: block. Menganimasikan ini biasanya tidak boleh dilakukan kerana display perubahan sifat, tetapi @starting-style menjadikannya boleh dicapai.

Pudar dan Gelongsor pada Muatan Halaman

Dalam contoh ini, @starting-style mentakrifkan keadaan "sebelum" untuk kedua-dua elemen. Kesan pudar menetapkan kelegapan awal kepada 0, manakala kesan slaid menggunakan terjemahan kiri.

---

Artikel ini memfokuskan pada animasi kemasukan. Kesan keluar tidak dikendalikan oleh @starting-style. Untuk animasi keluar, anda perlu meneroka transition-behavior, topik untuk perbincangan lain.

Baca artikel lengkap di sini. Lawati blog saya di sini.

Atas ialah kandungan terperinci Mempermudahkan Animasi Kemasukan dengan @gaya permulaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!