Transisi tampilan dip. – Beragampengetahuan

Sejujurnya saya mengatakan “Lihat transisi” API membuat saya takut lebih dari sekadar sedikit. Ada banyak tutorial dan demonstrasi paling mengesankan yang menunjukkan bagaimana kita menghidupkan transisi antara dua halaman, yang biasanya dimulai dengan yang termudah dari semua contoh.

@view-transition {
  navigation: auto;
}

Ini biasanya di mana kesederhanaan berakhir, dan tutorial masuk jauh ke ranah JavaScript. Tentu saja, tidak ada yang salah dengan itu, kecuali lompatan spiritual bagi orang -orang seperti saya daripada mereka yang belajar langkah demi langkah. Jadi, saya terinspirasi ketika saya melihat Paman Dave dan keterampilan perdagangan Paman Jim Nelson tentang transisi super praktis: judul posting.

Anda dapat melihat cara kerjanya di situs web Jim:

Ini adalah eksperimen yang sempurna di mana saya suka mencoba hal -hal baru. Itu dimulai dengan titik yang sama @view-transition Ringkasan yang digunakan untuk memilih dua halaman ini ke dalam tampilan transisi API: Halaman yang kami buka dan halaman yang kami navigasi. Dari sini kita dapat menganggap ini sebagai halaman “baru” dan halaman “lama”.

Saya bisa mendapatkan efek yang sama di blog pribadi saya:

Latihan yang sempurna untuk blogging, bukan? Atur dulu view-transition-name Mengenai elemen, kami terlibat dalam transisi, dalam hal ini judul posting pada halaman “Lama” dan judul posting di halaman “Baru”.

Jadi jika ini markup kami:

<h1 class="post-title">Notes</h1>
<a class="post-link" href="

… Kita bisa memberi mereka hal yang sama view-transition-name Di CSS:

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

Dave dengan cepat menunjukkan bahwa kami dapat memastikan kami menghormati pengguna yang lebih suka mengurangi olahraga dan hanya dapat berlaku jika preferensi sistem memungkinkannya:

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

Jika ini adalah satu -satunya dua elemen di halaman, itu berfungsi dengan baik. Tapi yang kami miliki adalah daftar tautan posting, yang semuanya harus memiliki keunikannya sendiri view-transition-name. Di situlah Jim sedikit terganggu dalam karyanya, karena bagaimana Anda mencapai ini ketika posting blog baru selalu diterbitkan? Apakah Anda harus mengedit CSS dan membuat nama transisi baru setiap kali Anda ingin memposting konten baru? Tidak, ada cara yang lebih baik.

di samping itu. Atau, setidaknya akan ada. Hanya saja itu belum standar. Faktanya, Bramus baru -baru ini menulis tentang karya Chrome tentang Chrome attr() Fungsi yang akan dapat menghasilkan serangkaian pengidentifikasi unik dalam satu deklarasi. Lihat CSS masa depan:

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

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

Daaaaa-aaaang akan sangat nyaman! Saya menginginkannya Sekarangbrengsek! Tidak hanya harus menunggu Chrome mengembangkannya, tetapi browser lain juga harus mengadopsi dan mengimplementasikannya, jadi siapa yang tahu kapan kita benar -benar akan mendapatkannya. Saat ini, opsi terbaik adalah menggunakan beberapa logika pemrograman secara langsung di templat. Situs web saya berjalan di WordPress jadi saya memiliki akses ke PHP dan saya dapat menghasilkan gaya inline untuk diatur view-transition-name Pada dua elemen.

Judul posting ada di templat untuk posting blog pribadi saya. Itu saja single.php Arsip dalam istilah WordPress.

<?php the_title( 
  '<h1 class="post-single__title" style="view-transition-name: post-' . get_the_id() . '">', '</h1>'
); ?>

Tautan posting ada di templat untuk arsip pos. Biasanya archive.php Di WordPress:

<?php the_title(
  '<h2 class="post-link><a href="' . esc_url( get_permalink() ) .'" rel="bookmark" style="view-transition-name: post-' . get_the_id() . '">', '</a></h2>' 
); ?>

Lihat apa yang terjadi di sana? ini view-transition-name Properti keduanya diinline langsung pada kedua elemen transisi, menggunakan PHP untuk menghasilkan nama berdasarkan ID yang ditetapkan oleh posting di WordPress. Cara lain adalah membuangnya <style> Penandaan logika dan memasukkan ke dalam templat. Dibandingkan dengan apa attr() Ini bisa dilakukan di masa depan, jadi pilih racun.

Yang penting adalah bahwa sekarang kedua elemen memiliki hal yang sama view-transition-name Dan kami sudah memilih @view-transition. Dengan dua bahan ini, transisi berfungsi! Kami bahkan tidak perlu mendefinisikan @keyframes (Tetapi Anda dapat melakukannya sepenuhnya) karena transisi default dapat melakukan semua pengangkatan berat.

Dengan semangat kaki yang sama, saya mengambil edisi terbaru dari Web Weekly Modern dan menyukai transisi pemandangan kecil ini dalam input radio:

Perhatikan bahwa JavaScript diperlukan untuk mencegah perilaku klik radio untuk menjalankan transisi sebelum memeriksa input.