View Transition API memungkinkan Anda memperbarui DOM dalam satu langkah, sekaligus menghasilkan transisi animasi di antara dua status tersebut.
Transisi semacam ini adalah fitur yang sering diminta dari developer, termasuk saya, dan menurut saya, kami telah berhasil melakukannya dengan cara yang menyeimbangkan default yang baik dengan ekstensibilitas dan penyesuaian. Sepertinya kami merasa bangga, tetapi masukan developer adalah kunci dari desain fitur ini. Prototipe sebelumnya dari fitur ini terasa jauh kurang fleksibel, dan orang-orang (seperti Anda?) yang meluangkan waktu untuk bermain-main dengan prototipe dan memberikan masukan memicu pemikiran ulang secara total. Terima kasih
Untuk lebih memahami fitur ini dan mencoba beberapa demo, lihat panduan kami. Jika menurut Anda ada hal yang belum dicakup, harap hubungi kami di Twitter, Mastodon, atau melalui email.
View Transition API saat ini hanya tersedia di Chrome; untungnya, API ini dapat digunakan sebagai progressive enhancement. Panduan ini mencakup fungsi bantuan yang dapat Anda gunakan di seluruh browser, tetapi hanya browser yang mendukung transisi tampilan yang akan mendapatkan animasi.
Kami mengembangkan fitur ini dalam CSS Working Group, dengan masukan dari vendor browser lain dan pihak independen. Kami tidak tahu apakah atau kapan browser lain akan mengadopsi View Transitions, tetapi perhatikan posisi standar Mozilla, dan posisi standar WebKit.
Tapi, kami belum 'selesai'!
Fungsi yang tersedia di Chrome 111 hanyalah rilis pertama. Kami harap kami telah menemukan semua bug, namun laporkan masalah apa pun yang Anda temukan di crbug.com, sebaiknya dengan demo yang lebih sedikit. Jika Anda tidak familier atau tidak nyaman bagi Anda, hubungi kami di Twitter, Mastodon, atau melalui email, dan kami akan membantu Anda.
Rilis ini adalah bagian kecil tapi mudah-mudahan dari gambaran yang lebih besar. Kami telah membuat sketsa beberapa ekstensi untuk fitur ini guna memastikan komponen yang kami kirim hari ini kompatibel dengan masa depan.
Berikut adalah sekilas tentang apa yang kami pikirkan. Ini tidak diurutkan berdasarkan prioritas (mungkin yang pertama adalah yang paling penting bagi banyak orang), jadi kami mengharapkan masukan mengenai penambahan mana yang paling penting bagi Anda.
Transisi di seluruh dokumen
Hal ini menurut saya sebagian besar developer ingin kita kerjakan selanjutnya, dan kabar baiknya adalah kita sedang mengerjakannya.
View Transitions API didesain agar dapat berfungsi di seluruh dokumen asal yang sama. Satu-satunya perbedaan adalah, bukannya startViewTransition memberi sinyal perubahan status DOM, navigasi itu sendiri akan memberikan sinyal perubahan tersebut.
Prototipe kita ini di balik flag chrome://flags/#view-transition-on-navigation. Berikut ini demo yang sangat sederhana, dan demo yang lebih kompleks.
Untuk melanjutkan hal ini, kami perlu mencari tahu bagaimana setiap halaman memilih transisi. Saat ini kami menggunakan tag meta: <meta name="view-transition" content="same-origin">, tetapi menurut kami CSS adalah tempat yang lebih baik untuk ini. Kami juga ingin memudahkan Anda mengetahui jenis halaman yang menjadi tempat transisi, sebaiknya tanpa perlu menulis JavaScript.
Ada banyak pekerjaan yang harus dilakukan, dan kami lebih memilih untuk melakukannya dengan 'benar' daripada 'cepat', tetapi ini jelas merupakan prioritas bagi kami.
Animasi berbasis compositor
Kami memilih untuk menganimasikan lebar dan tinggi pada grup transisi secara default karena jauh lebih mudah untuk disesuaikan. Namun, hal ini berarti animasi berjalan di thread utama, yang tidak ideal, terutama selama pemuatan halaman.
Kami berencana mendeteksi animasi default dan penyesuaian umum, lalu menafsirkannya ulang sebagai animasi berbasis compositor untuk peningkatan performa yang bagus.
Transisi cakupan
Saat ini, transisi SPA mencakup keseluruhan dokumen dan hanya satu transisi yang dapat berjalan dalam satu waktu. Kami ingin memperkenalkan fitur yang memungkinkan transisi dicakup ke elemen tertentu sehingga beberapa komponen halaman dapat menjalankan transisi secara independen.
Hal ini memungkinkan, misalnya, pemutar video tersemat untuk menggunakan transisi tampilan, secara bersamaan dengan widget chat tersemat.
Grup transisi bertingkat
Saat ini, semua ::view-transition-group adalah saudara kandung. Hal ini sering kali merupakan hal yang baik karena memungkinkan penayangan bertransisi dari satu penampung ke penampung lainnya, dan Anda tidak perlu khawatir dengan pemotongan.
Namun, terkadang Anda ingin tampilan terpotong oleh beberapa induk, yang mungkin juga terlibat dalam transisi.
Kita ingin menyelidiki keikutsertaan yang menempatkan ::view-transition-group tertentu dalam ::view-transition-group yang lain.
Class transisi
Setiap view-transition-name harus unik. Begitulah cara kita mengidentifikasi bahwa elemen tertentu secara konseptual "sama" di kedua sisi perubahan DOM, meskipun itu secara harfiah bukanlah elemen yang sama.
Namun, terkadang berbagai hal dengan view-transition-name yang berbeda harus menggunakan jenis animasi yang sama. Saat ini, hal ini berarti menambahkan aturan pemilih untuk setiap view-transition-name.
Kami ingin menambahkan cara untuk membuat kelas transisi untuk mengatasi batasan ini.
Abaikan elemen di balik layar
Jika Anda memberikan view-transition-name, elemen akan terlibat dalam transisi sebagai grupnya sendiri. Terkadang hal ini tidaklah ideal. Misalnya, jika Anda memberikan header view-transition-name, dan Anda beralih dari status saat Anda men-scroll ke bawah sebesar 2.000 piksel, ke status di bagian atas halaman, header akan dianimasikan dari jarak 2.000 piksel, yang terasa salah dalam hal pengaturan waktu.
Sebagai gantinya, kita ingin menambahkan keikutsertaan dengan sebuah elemen akan diabaikan, seolah-olah elemen tersebut tidak memiliki view-transition-name, jika sepenuhnya berada di luar area pandang.
Anda sudah dapat melakukannya menggunakan JavaScript dengan menetapkan style.viewTransitionName secara dinamis, tetapi sepertinya kita harus memiliki solusi deklaratif untuk hal ini.
Animasi berbasis requestAnimationFrame
Anda sudah dapat membuat animasi transisi tampilan dengan JavaScript melalui API animasi web, tetapi terkadang Anda perlu mendorong semuanya frame demi frame dengan requestAnimationFrame.
Anda sudah bisa melakukannya, tapi ini agak merepotkan. Berikut demo dengan beberapa bantuan yang mungkin berguna bagi Anda. Kami ingin membuatnya tidak repot!
Kita akan melakukan ini dalam dua bagian. Satu, dengan menyediakan API untuk menunjukkan kapan animasi selesai. Dan dua, dengan memberikan akses JavaScript ke elemen pseudo. Bagian kedua itu mungkin pekerjaan yang cukup besar, tetapi terasa seperti hal yang tepat untuk dilakukan dalam jangka panjang.
Sekarang lakukan beberapa transisi tampilan yang bagus!
Semoga, seperti saya, Anda bersemangat dengan masa kini dan masa depan fitur ini. Jika Anda memiliki masukan, atau hanya ingin memamerkan beberapa transisi tampilan yang telah Anda buat, baik transisi tersebut mulus dan fungsional, atau sekadar biasa konyol, harap hubungi saya di Twitter atau Mastodon.