Hari ini kami ingin membagikan lebih banyak informasi tentang perjalanan Chrome dan Astro dengan View Transitions API. Hal ini mencakup cara komunitas Astro memanfaatkan dan bereksperimen dengan API ini lebih awal, yang menyoroti berbagai kemungkinan yang ada kepada komunitas yang lebih luas. Kami juga bersemangat untuk menyampaikan lebih banyak tentang dukungan bawaan yang baru untuk View Transitions di Astro 3.0.
Latar belakang
Transisi yang lancar antara berbagai status halaman, yang dikenal sebagai transisi status, selalu menjadi aspek kompleks dalam membangun pengalaman yang lancar dan animasi di web. Terlepas dari ketersediaan 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 membaca dan fokus untuk alat bantu tidaklah mudah. Selain itu, menangani perbedaan posisi scroll membuat transisi status menjadi proses yang rumit. Semua faktor ini berkontribusi pada kompleksitas penerapan transisi yang mulus antara berbagai elemen pada halaman web
View Transitions API muncul sebagai solusi browser untuk mengatasi tantangan ini. API baru ini memberikan cara yang lebih mudah untuk mengubah DOM dalam satu langkah saat membuat transisi animasi antara dua status.
Peluncuran View Transitions API di Chrome 111 menandai awal visi yang lebih luas terkait dukungan transisi bagi semua situs, bukan hanya aplikasi web berbasis JavaScript. Peningkatan mendatang juga akan segera dilakukan. Chrome dapat menjelajahi penambahan menarik seperti transisi di seluruh dokumen, animasi berbasis compositor, transisi terbatas, dan grup transisi bertingkat pada masa mendatang.
Eksplorasi awal dengan transisi tampilan
Perjalanan Chrome dengan View Transitions API bukanlah satu-satunya. Masukan dan kolaborasi dari developer, penulis framework, dan CSS Working Group, semuanya memainkan peran penting dalam membentuk fitur ini dalam kurun waktu beberapa tahun.
Eksperimen developer memainkan peran penting sejak awal. Versi paling awal dari API tidak mendukung animasi CSS, dan transisi dibatasi untuk beberapa preset yang terbatas. Masukan awal memperjelas bahwa developer ingin transisi sepenuhnya dapat disesuaikan dan ekspresif. Kolaborasi dua arah ini memastikan bahwa API dirancang dengan keseimbangan default, ekstensibilitas, dan penyesuaian yang baik.
Astro adalah salah satu framework yang mengandalkan View Transitions. Bagian lain dari artikel ini adalah dari sudut pandang tim Astro, dan membagikan pengalaman mereka dalam menemukan, mengadopsi, dan menempatkan Transisi Tampilan di posisi utama dalam pengalaman pengembangan web.
Alasan Astro bertaruh pada transisi tampilan
Astro sudah lama mencari sesuatu seperti View Transitions. Astro adalah framework web JavaScript yang me-render komponen UI Anda ke HTML ringan untuk meningkatkan performa pemuatan halaman. Astro sengaja memindahkan sebanyak mungkin pekerjaan dari perangkat klien. Situs Astro menggunakan navigasi halaman browser native, sementara framework web lainnya mungkin membajak navigasi browser dengan perutean sisi klien JavaScript.
Kompromi ini menimbulkan tantangan bagi tim Astro: Bagaimana Astro dapat menganimasikan transisi halaman dan menyediakan persistensi UI seperti aplikasi di seluruh halaman tanpa mengadopsi perutean sisi klien?
Transisi Tampilan adalah jawabannya. Dengan View Transitions, Astro dapat menyediakan fitur perutean yang sama dengan yang ditawarkan oleh kerangka kerja web SPA dengan JavaScript, tetapi tanpa overhead performa dan kompleksitas perutean sisi klien. Framework lain menggunakan View Transitions sebagai detail implementasi opsional, tetapi bagi Astro hal itu jauh lebih besar.
Pertanyaan berikutnya yang harus dijawab tim Astro adalah, “bagaimana?” Tim melihat proyek seperti Turbo, Swup, dan Livewire untuk mendapatkan inspirasi dan bahkan membuat prototipe beberapa pendekatan serupa di dalam Astro.
Salah satu upaya paling awal melibatkan "transisi cerdas" satu halaman penuh yang akan secara otomatis membandingkan setiap halaman baru HTML dengan HTML saat ini dan kemudian 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 andal tanpa produk yang terlalu rumit. Setelah melihat beberapa demo awal, tim Astro tertarik dengan Astro API sederhana yang dapat mencocokkan API browser sedekat mungkin. Alih-alih melihat Transisi Tampilan sebagai detail implementasi tidak terlihat yang tersembunyi di dalam Astro, transisi tersebut dapat langsung diekspos kepada developer. Menyelaraskan Astro secara langsung dengan platform web dan mengurangi kompleksitas 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: menghadirkan View Transitions API baru ke Astro dan menyediakan 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 View Transitions eksperimental di Astro 2.9. Responsnya langsung positif. Developer mulai berbagi demo luar biasa dari begitu banyak kasus penggunaan yang berbeda, dan dalam beberapa kasus bahkan mengirimkan semuanya ke produksi.
Astro 3.0, menyelesaikan dukungan dan membatalkan tanda View Transitions API yang baru untuk semua orang. API baru ini sekarang siap untuk Anda gunakan 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 yang tidak terduga dari menyelaraskan Astro dengan API platform adalah kemampuan untuk bereksperimen dengan mem-build fitur baru selain View Transitions API native. Misalnya, perintah transition:persist Astro yang baru memungkinkan elemen apa pun tetap ada di navigasi halaman penuh. Ini mendukung elemen yang sudah lama ada seperti pemutar audio dan video persisten, sesuatu yang dulu 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 gratis membuat View Transitions lebih ergonomis bagi developer. Misalnya, tim telah menambahkan dukungan untuk animasi maju/mundur kustom dan animasi untuk HTML dinamis. Kedua fitur ini sulit dilakukan hanya dengan API tingkat lebih rendah, tetapi di Astro keduanya praktis sangat mudah.
Fitur ini baru tersedia di Astro untuk saat ini, tetapi tim Astro berharap dapat memberikan pengalaman mereka kembali ke penulis spesifikasi dan kelompok kerja untuk peningkatan kualitas browser yang potensial di kemudian hari. Misalnya, dengan memantau proposal secara cermat untuk mempermudah berbagi animasi di CSS.
Apa selanjutnya?
Masa depan untuk Transisi Tampilan di web sangat cerah. Astro, Nuxt, dan HTMX telah memberikan dukungan yang optimal, dan banyak lagi yang menyatakan minatnya.
Tim Chrome sangat antusias dengan dukungan View Transitions bawaan Astro. Ini adalah langkah besar untuk pengembangan web, yang memungkinkan pengalaman pengguna yang lebih lancar dan dinamis. Untuk developer, sebaiknya Anda mempelajari View Transitions di Astro 3.0. Baik Anda membuat halaman landing baru atau mengupgrade situs yang sudah ada, penyempurnaan ini membawa perubahan besar. Lihat Transisi membantu mengisi kesenjangan antara hal-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 View Transitions WICG untuk membahas hal ini lebih lanjut.
Kami telah terinspirasi oleh demo dan aplikasi inovatif yang pernah kami lihat, dan kami ingin melihat lebih banyak lagi. Pekerjaan Anda dengan Transisi Tampilan sedang membentuk masa depan web. Cobalah View Transitions di Astro, bagikan karya Anda, dan mari kita lanjutkan perjalanan ini bersama-sama.