Hari ini, kami ingin membagikan lebih lanjut perjalanan Chrome dan Astro dengan View Transitions API. Hal ini mencakup cara komunitas Astro menerima dan bereksperimen dengan API lebih awal, yang menyoroti kemungkinannya bagi komunitas yang lebih luas. Kami juga ingin menyampaikan informasi selengkapnya tentang dukungan bawaan baru untuk Transisi Tampilan di Astro 3.0.
Latar belakang
Transisi yang lancar di antara berbagai status halaman, yang dikenal sebagai transisi status, selalu menjadi aspek yang kompleks dalam membuat pengalaman animasi yang lancar di web. Meskipun tersedia alat seperti transisi CSS, animasi CSS, dan Web Animation API, membuat transisi status tetap menjadi tugas yang berat. Salah satu tantangannya adalah menangani interaksi pada elemen keluar, yang dapat membuat transisi menjadi lebih kompleks.
Selain itu, mempertahankan posisi dan fokus membaca untuk perangkat pendukung juga sulit. Selain itu, menangani perbedaan posisi scroll membuat transisi status menjadi proses yang rumit. Semua faktor ini berkontribusi pada kompleksitas penerapan transisi yang lancar di antara berbagai elemen di halaman web
View Transitions API muncul sebagai solusi browser untuk tantangan ini. API baru ini menyediakan cara yang lebih mudah untuk mengubah DOM dalam satu langkah sekaligus membuat transisi animasi di antara dua status.
Peluncuran View Transitions API di Chrome 111 menandai awal dari visi yang lebih luas untuk dukungan transisi bagi semua situs, bukan hanya aplikasi web berbasis JavaScript. Peningkatan mendatang juga akan segera hadir. Chrome dapat mempelajari penambahan menarik seperti transisi di seluruh dokumen, animasi yang didorong kompositor, transisi cakupan, dan grup transisi bertingkat pada masa mendatang.
Eksplorasi awal dengan transisi tampilan
Perjalanan Chrome dengan View Transitions API tidak sendirian. Masukan dan kolaborasi dari developer, penulis framework, dan CSS Working Group semuanya berperan penting dalam membentuk fitur ini selama beberapa tahun.
Eksperimen developer memainkan peran penting sejak awal. Versi API paling awal tidak mendukung animasi CSS, dan transisi dibatasi untuk beberapa preset yang membatasi. Masukan awal memperjelas bahwa developer menginginkan transisi yang dapat disesuaikan sepenuhnya dan ekspresif. Kolaborasi bolak-balik ini memastikan bahwa API dirancang dengan keseimbangan default, ekstensi, dan penyesuaian yang baik.
Astro adalah salah satu framework yang mengandalkan Transisi Tampilan sejak awal. Bagian lain dari artikel ini adalah dari sudut pandang tim Astro, dan membagikan pengalaman mereka dalam menemukan, mengadopsi, dan menghadirkan View Transitions ke pengalaman pengembangan web.
Alasan Astro mengandalkan transisi tampilan
Astro telah mencari sesuatu seperti Transisi Tampilan sejak lama. Astro adalah framework web JavaScript yang merender komponen UI Anda ke HTML ringan untuk performa pemuatan halaman yang lebih cepat. Astro sengaja memindahkan sebanyak mungkin pekerjaan dari perangkat klien. Situs Astro menggunakan navigasi halaman browser native, sedangkan framework web lainnya dapat membajak navigasi browser dengan pemilihan rute sisi klien JavaScript.
Kompromi ini menciptakan tantangan bagi tim Astro: Bagaimana Astro dapat menganimasikan transisi halaman dan memberikan persistensi UI seperti aplikasi di seluruh halaman tanpa mengadopsi perutean sisi klien?
View Transitions adalah jawabannya. Dengan Transisi Tampilan, Astro dapat menyediakan fitur pemilihan rute yang sama dengan yang ditawarkan framework web SPA yang berat JavaScript, tetapi tanpa overhead performa dan kompleksitas pemilihan rute sisi klien. Framework lain mendekati Transisi Tampilan sebagai detail implementasi opsional, tetapi bagi Astro, ini adalah sesuatu yang jauh lebih besar.
Pertanyaan berikutnya yang harus dijawab tim Astro adalah, “bagaimana?” Tim ini mencari inspirasi dari project seperti Turbo, Swup, dan Livewire, bahkan membuat prototipe beberapa pendekatan serupa di dalam Astro.
Salah satu upaya paling awal melibatkan “transisi cerdas” halaman penuh yang akan otomatis membandingkan setiap halaman HTML baru dengan HTML saat ini, lalu mencoba mengganti setiap elemen sekaligus menggunakan JavaScript. Cara ini cerdas, tetapi rentan terhadap error.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Untungnya, komunitas Astro menunjukkan bahwa View Transitions API sudah canggih tanpa membuat produk menjadi terlalu rumit. Setelah melihat beberapa demo awal, tim Astro tertarik dengan ide Astro API sederhana yang dapat mencocokkan API browser sedekat mungkin. Alih-alih melihat Transisi Tampilan sebagai detail implementasi yang tidak terlihat yang disembunyikan di dalam Astro, transisi tersebut dapat langsung ditampilkan kepada developer. Menyelaraskan Astro langsung dengan platform web dan mengurangi kompleksitas secara keseluruhan di frontend.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Pekerjaan menjadi sederhana: hadirkan View Transitions API baru ke Astro dan berikan penggantian otomatis yang akan dihadirkan ke sebanyak mungkin situs dan browser. Dukungan penggantian sangat penting, karena sebagian besar browser (di luar Chrome) belum mengirimkan dukungan penuh untuk Transisi Tampilan native.
Meluncurkan dukungan resmi di Astro
Astro merilis dukungan Transisi Tampilan eksperimental di Astro 2.9. Responsnya langsung positif. Developer mulai membagikan demo luar biasa dari berbagai kasus penggunaan, dan dalam beberapa kasus bahkan mengirimkan semuanya ke produksi.
Astro 3.0, menyelesaikan dukungan dan menghapus tanda View Transitions API baru untuk semua orang. API baru ini kini siap untuk Anda terapkan secara eksperimental, atau sekaligus.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Manfaat tak terduga dari menyelaraskan Astro dengan API platform adalah kemampuan untuk bereksperimen dengan membuat fitur baru di atas View Transitions API native. Misalnya, perintah transition:persist Astro baru memungkinkan elemen apa pun tetap ada di seluruh navigasi halaman penuh. Hal ini mendukung elemen yang berumur panjang seperti pemutar audio dan video persisten, sesuatu yang sebelumnya hanya dapat dilakukan di SPA JavaScript yang berat.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro juga bebas membuat Transisi Tampilan lebih ergonomis bagi developer. Misalnya, tim telah menambahkan dukungan untuk animasi maju/mundur kustom dan animasi untuk HTML dinamis. Kedua fitur ini sulit dilakukan dengan API tingkat rendah saja, tetapi di Astro, keduanya praktis tanpa usaha.
Fitur ini hanya ada di Astro untuk saat ini, tetapi tim Astro berharap dapat memberikan pengalaman mereka kembali kepada penulis spesifikasi dan grup kerja untuk potensi peningkatan browser di masa mendatang. Misalnya, dengan memantau proposal secara cermat untuk mempermudah berbagi animasi di CSS.
Apa selanjutnya?
Masa depan Transisi Tampilan di web sangat cerah. Astro, Nuxt, dan HTMX telah mengirimkan dukungan dalam tingkat tertentu, dan banyak lainnya telah menyatakan minat.
Tim Chrome sangat senang dengan dukungan Transisi Tampilan native Astro. Ini adalah langkah besar untuk pengembangan web, yang memungkinkan pengalaman pengguna yang lebih lancar dan dinamis. Developer, sebaiknya Anda mempelajari View Transitions di Astro 3.0. Baik Anda membuat halaman landing baru atau mengupgrade situs yang ada, peningkatan ini akan mengubah segalanya. Transisi Tampilan membantu mengisi kesenjangan antara hal yang dapat dilakukan dengan SPA dan MPA. Chrome ingin mendengar pendapat Anda tentang apakah ada kesenjangan tambahan dalam dukungan untuk SPA dan/atau MPA. Jangan ragu untuk memberikan komentar di repo GitHub WICG View Transitions untuk membahasnya lebih lanjut.
Kami sudah terinspirasi oleh demo dan aplikasi inovatif yang telah kami lihat, dan kami ingin melihat lebih banyak lagi. Pekerjaan Anda dengan Transisi Tampilan membentuk masa depan web. Coba Transisi Tampilan di Astro, bagikan hasil kerja Anda, dan mari kita lanjutkan perjalanan ini bersama-sama.