View Transition API memungkinkan Anda memperbarui DOM dalam satu langkah, sekaligus menghasilkan transisi animasi di antara dua status.
Jenis transisi ini adalah fitur yang sering diminta oleh developer, termasuk saya, dan saya rasa kami berhasil mewujudkannya dengan cara menyeimbangkan setelan default yang baik dengan ekstensi dan penyesuaian. Mungkin terdengar seperti kami memuji diri sendiri, tetapi masukan developer adalah kunci dalam desain fitur ini. Prototipe awal fitur ini jauh lebih kaku, dan orang-orang (seperti Anda?) yang meluangkan waktu untuk mencoba prototipe dan memberikan masukan memicu pemikiran ulang total. Terima kasih!
Untuk memahami fitur ini, dan mencoba beberapa demo, lihat panduan kami. Jika ada sesuatu yang menurut Anda tidak tercakup di sana, harap hubungi saya 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 menyertakan fungsi helper 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 input dari vendor browser dan pihak independen lainnya. Kami tidak tahu apakah atau kapan browser lain akan mengadopsi Transisi Tampilan, tetapi pantau terus posisi standar Mozilla, dan posisi standar WebKit.
Namun, kita belum 'selesai'.
Fungsi yang diluncurkan di Chrome 111 hanyalah rilis pertama. Kami harap kami telah menemukan semua bug, tetapi harap laporkan masalah yang Anda temukan di crbug.com, sebaiknya dengan demo yang dipersingkat. Jika Anda tidak terbiasa atau tidak nyaman dengan hal tersebut, hubungi saya di Twitter, Mastodon, atau melalui email, dan saya akan membantu.
Rilis ini adalah bagian kecil, tetapi semoga berguna, dari gambaran yang lebih besar. Kami telah membuat sketsa beberapa ekstensi untuk fitur ini guna memastikan bagian yang kami kirimkan saat ini kompatibel dengan masa mendatang.
Berikut adalah cuplikan tentang apa yang kami pikirkan. Daftar ini tidak diurutkan berdasarkan prioritas (mungkin yang pertama adalah yang paling penting bagi banyak orang), jadi kami ingin mendengar masukan tentang penambahan mana yang paling penting bagi Anda.
Transisi di seluruh dokumen
Ini adalah fitur yang menurut saya paling banyak diinginkan developer untuk kami kerjakan selanjutnya, dan kabar baiknya adalah kami sudah mengerjakannya.
View Transitions API dirancang agar dapat berfungsi di seluruh dokumen dengan origin yang sama. Satu-satunya perbedaan adalah, alih-alih startViewTransition yang menandakan perubahan status DOM, navigasi itu sendiri akan menandakan perubahan tersebut.
Prototipe kami untuk ini berada di balik tanda chrome://flags/#view-transition-on-navigation. Berikut adalah demo yang sangat sederhana, dan demo yang lebih kompleks.
Untuk melanjutkan, kita perlu mencari tahu cara setiap halaman memilih untuk menggunakan transisi. Saat ini kita 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 Anda transisikan, 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 yang didorong oleh kompositor
Kami memilih untuk menganimasikan lebar dan tinggi pada grup transisi secara default karena lebih mudah disesuaikan. Namun, ini berarti animasi berjalan di thread utama, yang tidak ideal, terutama selama pemuatan halaman.
Kami berencana mendeteksi animasi default dan penyesuaian umum, lalu menafsirkannya kembali sebagai animasi yang didorong oleh kompositor untuk meningkatkan performa.
Transisi cakupan
Saat ini, transisi SPA dicakup untuk seluruh 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 akan memungkinkan, misalnya, pemutar video tersemat menggunakan transisi tampilan, sekaligus dengan widget chat tersemat.
Grup transisi bertingkat
Saat ini, semua ::view-transition-group adalah saudara. Hal ini sering kali merupakan hal yang baik, karena memungkinkan tampilan bertransisi dari satu penampung ke penampung lainnya, dan Anda tidak perlu khawatir tentang pemangkasan.
Namun, terkadang Anda ingin tampilan dipangkas oleh beberapa induk, yang mungkin juga terlibat dalam transisi.
Kita ingin menyelidiki keikutsertaan yang menempatkan ::view-transition-group tertentu dalam ::view-transition-group lain.
Class transisi
Setiap view-transition-name harus unik. Dengan begitu, kita dapat mengidentifikasi bahwa elemen tertentu secara konseptual "sama" di kedua sisi perubahan DOM, meskipun secara harfiah bukan elemen yang sama.
Namun, terkadang hal-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.
Kita ingin menambahkan cara untuk membuat class transisi guna mengatasi batasan ini.
Mengabaikan elemen di luar layar
Jika Anda memberi elemen view-transition-name, elemen tersebut akan terlibat dalam transisi sebagai grupnya sendiri. Terkadang hal ini tidak ideal. Misalnya, jika Anda memberi 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 tempat elemen akan diabaikan, seolah-olah tidak memiliki view-transition-name, jika sepenuhnya berada di luar area pandang.
Anda sudah dapat melakukannya dengan JavaScript dengan menetapkan style.viewTransitionName secara dinamis, tetapi sepertinya kita harus memiliki solusi deklaratif untuk hal ini.
animasi yang didorong requestAnimationFrame
Anda sudah dapat membuat animasi transisi tampilan dengan JavaScript melalui web animations API, tetapi terkadang Anda perlu menjalankannya frame demi frame dengan requestAnimationFrame.
Anda sudah dapat melakukannya, tetapi cara ini agak rumit. Berikut adalah demo dengan beberapa bantuan yang mungkin berguna bagi Anda. Kita ingin membuatnya tidak terlalu rumit.
Kita akan melakukannya dalam dua bagian. Pertama, dengan menyediakan API untuk menunjukkan kapan animasi selesai. Dan kedua, dengan memberikan akses JavaScript ke pseudo-elemen. Bagian kedua mungkin merupakan pekerjaan yang cukup besar, tetapi rasanya itu adalah hal yang tepat untuk dilakukan dalam jangka panjang.
Sekarang, buat beberapa transisi tampilan yang bagus.
Semoga, seperti saya, Anda juga antusias dengan fitur ini saat ini dan di masa mendatang. Jika Anda memiliki masukan, atau hanya ingin memamerkan beberapa transisi tampilan yang Anda buat, baik yang lancar dan fungsional, atau hanya biasa konyol, harap hubungi saya di Twitter atau Mastodon.