Kaki mencelup ke arah peralihan

terus terang, API Peralihan Lihat agak menakutkan bagi saya. Banyak tutorial menunjukkan demonstrasi yang mengagumkan tentang bagaimana kita menghidupkan penukaran antara dua halaman, yang biasanya bermula dengan contoh yang paling mudah:

@view-transition {
  navigation: auto;
}

Tetapi ini biasanya merupakan akhir bahagian yang mudah, dan tutorial kemudian menggali ke dalam bidang JavaScript. Sudah tentu, ini tidak salah, tetapi ia adalah lompatan besar untuk seseorang seperti saya yang belajar langkah demi langkah. Oleh itu, saya terinspirasi apabila saya melihat Uncle Dave dan Jim Neilsen berkongsi teknik penukaran yang sangat praktikal (tajuk).

anda dapat melihat bagaimana ia berfungsi di laman web Jim:

Ini adalah percubaan "makanan ringan" yang sempurna di mana saya suka mencuba perkara -perkara baru. Ia bermula dengan coretan kod

yang sama yang digunakan untuk menyertai kedua -dua halaman ke API Peralihan Lihat: Halaman semasa dan halaman yang anda mahu navigasi ke. Dari sini kita boleh memikirkan mereka sebagai halaman "baru" dan "lama". @view-transition

Saya juga mencapai kesan yang sama pada blog peribadi saya:

Ini adalah latihan yang sempurna untuk blog, bukan? Ia mula -mula menetapkan

pada elemen yang kita mahu turut serta dalam penukaran, dalam hal ini tajuk artikel pada halaman "lama" dan tajuk artikel pada halaman "baru". view-transition-name

jadi jika tag kami adalah seperti berikut:

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

... kita boleh memberi mereka sama

dalam CSS: view-transition-name

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

Dave dengan cepat menegaskan bahawa kita dapat memastikan penghormatan kepada pengguna yang lebih suka mengurangkan latihan dan tetapan ini hanya digunakan jika keutamaan sistem mereka membenarkan latihan:

@media not (prefers-reduced-motion: reduce) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

Jika hanya terdapat dua elemen ini pada halaman, maka ini akan berfungsi dengan baik. Tetapi kita mempunyai senarai pautan artikel, yang semuanya mesti mempunyai unik

mereka sendiri. Di situlah Jim mempunyai beberapa kesukaran dalam karyanya kerana bagaimana sebenarnya anda melakukan ini ketika menerbitkan catatan blog baru? Adakah anda perlu mengedit CSS anda dan tampil dengan nama penukaran baru setiap kali anda ingin menyiarkan kandungan baru? Tidak, mesti ada cara yang lebih baik. view-transition-name

ia tidak. Atau, sekurang -kurangnya pada masa akan datang. Ia tidak standard lagi. Malah, Bramus menulis ini baru -baru ini semasa membincangkan kerja Chrome mengenai fungsi

, yang akan dapat menghasilkan satu siri pengenal unik dalam perisytiharan. Lihatlah CSS masa depan ini: attr()

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */
  view-transition-class: card;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div></custom-ident>

hebat! Saya mahu menggunakannya sekarang! Sayang sekali yang bukan sahaja perlu menunggu Chrome untuk membangunkannya, tetapi juga untuk pelayar lain untuk mengadopsi dan melaksanakannya, jadi siapa yang tahu bila kita benar -benar dapat mendapatkannya. Pada masa ini, cara terbaik ialah menggunakan beberapa logik pengaturcaraan secara langsung dalam templat. Laman web saya berjalan di WordPress supaya saya dapat mengakses PHP dan menghasilkan gaya sebaris yang menetapkan

pada kedua -dua elemen. view-transition-name

Tajuk artikel berada dalam templat untuk posting blog saya. Dalam jargon WordPress, iaitu fail single.php.

@view-transition {
  navigation: auto;
}

Pautan artikel terletak di templat arkib artikel. Di WordPress, ini biasanya archive.php:

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

lihat apa yang berlaku di sana? Atribut view-transition-name ditetapkan secara langsung pada dua elemen penukaran sebaris, menggunakan PHP untuk menghasilkan nama berdasarkan ID yang ditugaskan artikel dalam WordPress. Cara lain ialah menambah tag <style></style> ke templat dan letakkan logik di sana. Kedua -dua kaedah ini sama -sama canggung berbanding dengan apa yang boleh anda capai pada masa akan datang, jadi pilih yang anda suka. attr()

yang penting, sekarang kedua -dua elemen ini berkongsi

yang sama dan kami telah menyertai view-transition-name. Dengan kedua -dua elemen ini, penukaran boleh berfungsi! Kami tidak perlu menentukan @view-transition (tetapi anda boleh) kerana penukaran lalai melakukan semua mengangkat berat. @keyframes

Dalam semangat "rasa sedikit" yang sama, saya melihat isu terbaru Web Mingguan Minuman, dan saya suka menggunakan peralihan pandangan kecil ini pada butang radio:

Perhatikan bahawa JavaScript diperlukan untuk menyekat tingkah laku klik lalai butang radio supaya penukaran dibenarkan untuk dijalankan sebelum memasuki dipilih.

Atas ialah kandungan terperinci Kaki mencelup ke arah peralihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!