Jadi, anda ingin menghidupkan harta paparan

menghidupkan harta display: revolusi CSS?

Kumpulan Kerja CSS baru -baru ini meluluskan cadangan yang membolehkan animasi dan peralihan harta display -pembangunan penting. Ini bermakna kita boleh menghidupkan peralihan antara, misalnya, display: block dan display: none.

Ini memberikan cabaran yang unik. Pada masa ini, tetapan tiba -tiba menghentikan sebarang animasi yang berjalan. Menambahnya kembali memulakannya semula. Spesifikasi menjelaskan: Menetapkan

Menamatkan animasi; Menukar display: none dari display: none ke nilai lain memulakan semula mereka. display none Tingkah laku yang seolah -olah paradoks ini pada mulanya mencadangkan cadangan itu tidak boleh dilakukan. Walau bagaimanapun, kunci ialah

akan mengutamakan sebarang nilai paparan

selain daripada @keyframes . Ini menghalang daripada mengganggu atau memulakan semula animasi sehingga selesai sepenuhnya. none none penjelasan Miriam (mari kita panggil "toots" ini, kita?) Menjelaskan proses: Ia bukan tentang interpolasi antara

dan

, tetapi membenarkan block untuk terus aktif sehingga animasi menyimpulkan, di mana none selamat berkuatkuasa. Animasi tetap diskret; Kami bertukar antara negeri block selepas none selesai animasi. Contoh Robert Flack menggambarkan ini:

Bingkai awal mengutamakan

, mengatasi

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

dan membenarkan animasi selesai sebelum

berkuatkuasa. display: block display: none Contoh mastodon Miriam menggunakan peralihan: none

di sini,

pada mulanya ditetapkan, mengeluarkan elemen dari aliran dokumen. Pada hover, nilai

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

.hide:hover {
  display: block;
  opacity: 1;
}

diprioritaskan, membolehkan peralihan selepas peralihan kelegapan selesai.

display: none Walaupun ini adalah kemajuan yang ketara, masih banyak yang perlu ditangani. Interaksi dengan pelbagai animasi, animasi tak terhingga, animasi terbalik, dan lain -lain, memerlukan pertimbangan selanjutnya. Walau bagaimanapun, ini adalah langkah terobosan ke hadapan! block

Atas ialah kandungan terperinci Jadi, anda ingin menghidupkan harta paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!