Apa di bumi adalah `jenis` deskriptor dalam peralihan pandangan?

pernah meneliti sesuatu yang baru hanya untuk mencari maklumat kecil? Itulah paradoks yang mengecewakan namun menarik untuk meneroka wilayah digital yang belum dipetakan. Saya baru-baru ini menemui ini semasa mendokumentasikan aturan

dan @view-transition deskriptor. types

Anda mungkin akrab dengan Peralihan Lihat Cross Document: Peralihan bertenaga CSS antara laman web, sebelum ini memerlukan kerangka JavaScript dan perpustakaan animasi. Memulakan peralihan melibatkan penetapan

deskriptor untuk navigation pada kedua-dua halaman, mewujudkan kesan silang silang yang lancar. auto

@view-transition {
  navigation: auto;
}

mudah, bukan?

adalah deskriptor yang biasa diketahui. Tetapi ada yang lain, kurang didokumentasikan adik: Descriptor navigation. types

Memahami

deskriptor types

Peralihan paparan silang dokumen agak baru, jadi penerokaan komprehensif sedang berjalan. Anehnya, deskriptor

sering diabaikan; Sesetengah dokumentasi menghilangkannya sepenuhnya. Spesifikasi CSS menyediakan penjelasan ini: types

Deskriptor

menetapkan jenis aktif untuk peralihan semasa menangkap atau melakukan peralihan. types

lebih khusus,

menerima senarai nama jenis aktif yang dipisahkan ruang (sebagai types) atau <custom-ident></custom-ident> jika tidak ada jenis aktif yang dikenakan. none

• Nama: types
• untuk: @view-transition
• Nilai: | none <custom-ident> </custom-ident>
• awal: none

Contoh Penggunaan:

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

Tetapi apakah jenis "aktif"? Mari kita menyelidiki lebih mendalam.

Jenis Aktif: Peralihan jahitan

Cabaran: Animasi silang fade sejagat berguna, tetapi selalunya kita memerlukan penyesuaian peralihan berdasarkan konteks navigasi. Sebagai contoh, kandungan paginated mungkin slaid kanan/kiri, sementara klik profil media sosial dapat meneruskan imej profil semasa peralihan. Menentukan pelbagai peralihan secara langsung membawa kepada konflik. Kami memerlukan pengaktifan peralihan selektif.

Penyelesaian: Jenis aktif menentukan peralihan yang dilaksanakan dan unsur -unsur yang menyertai. Dalam CSS, unsur-unsur sasaran kelas pseudo dengan jenis aktif tertentu. Jika kita menentukan :active-view-transition-type() sebagai jenis aktif, animasi bounce diaktifkan hanya apabila keadaan bounce dipenuhi. :active-view-transition-type(bounce)

@view-transition {
  navigation: auto;
}

Ini menghalang peralihan yang bertentangan. Yang penting, ini hanya mempengaruhi peralihan ke halaman, bukan peralihan daripadanya, membolehkan peralihan disesuaikan berdasarkan halaman destinasi.

Demo yang mempamerkan peralihan bounce dan slide, dikawal melalui deskriptor types, tersedia di sini . Kod penuh adalah di GitHub [Link-to-Github].

peranan yang dipertingkatkan JavaScript

CSS sahaja mengehadkan kawalan ke peralihan berdasarkan halaman destinasi. Senario yang lebih kompleks, seperti penomboran dan contoh media sosial kami, memerlukan mengetahui halaman sumber. Jenis aktif boleh dihuni dalam tiga cara:

1. melalui startViewTransition(callbackOptions) argumen.
2. Mutasi secara dinamik menggunakan harta peralihan types.
3. diisytiharkan menggunakan deskriptor types (seperti yang dibincangkan di atas).

Opsyen 2, menggunakan acara pagereveal, membolehkan tetapan jenis aktif atas permintaan, membolehkan peralihan konteks yang menyedari berdasarkan halaman sumber dan destinasi. Penjelajahan lebih lanjut mengenai kaedah ini adalah wajar.

untuk menyelam yang lebih mendalam ke dalam jenis aktif dan melihat peralihan, lihat:

• Lihat Jenis Peralihan dalam Peralihan Lihat Dokumen Cross (Bramus)
• Sesuaikan arah peralihan pandangan dengan JavaScript (Umar Hansa)

Atas ialah kandungan terperinci Apa di bumi adalah `jenis` deskriptor dalam peralihan pandangan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!