Lihat Peralihan di Astro

Lihat Penukaran di Astro: Alat yang berkuasa untuk Switching Page Switching

Artikel ini dikutip dari buku SitePoint Premium "Membebaskan Kuasa Astro", yang memperkenalkan fungsi penukaran pandangan di Astro.

API Transformasi View menyediakan cara yang mudah untuk mengemas kini kandungan DOM secara serentak dalam satu operasi dan menghasilkan kesan penukaran animasi antara negara DOM individu. Melaksanakan ini di web pada masa lalu sangat sukar, tetapi dengan API baru ini, transformasi menjadi agak mudah. Penyelidikan menunjukkan bahawa menggunakan API Penukaran Lihat dapat mempercepatkan prestasi laman web yang dirasakan.

Astro secara asli menyokong penukaran pandangan dan mempunyai mekanisme sandaran terbina dalam untuk menyokong pelayar yang tidak menyokong API ini.

Penyelesaian asli ini menyokong animasi terbina dalam, animasi navigasi depan dan belakang, dan sokongan akses automatik (melalui

), dan banyak ciri lain. prefers-reduced-motion

Salah satu cara terbaik untuk melihat penukaran Demo adalah menggunakan elemen video yang akan mengekalkan keadaan antara penukaran halaman. (Perhatikan bahawa kita juga boleh menyimpan keadaan antara komponen menggunakan arahan

.) Video di bawah menunjukkan contoh. client:*

Katakan kita mempunyai komponen

yang mengandungi perkara berikut: <video></video>

<code>---
// src/components/Video
const src = 'https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4';
const {
  autoplay = false,
  controls = true,
  loop = false
} = Astro.props;
---

<video transition:persist=""></video></code>

Dalam kod di atas, kami mendapat video dari Cloudinary. Di samping itu, kami membenarkan video untuk bermain dan gelung secara automatik selepas main balik, dan memberikan pengguna dengan butang kawalan. Tetapan ini ditentukan oleh sifat -sifat yang dihantar ke komponen video ini, dan jika sifat -sifat ini tidak disediakan, nilai lalai digunakan. Pembolehubah ini kemudiannya ditambah ke elemen HTML

. <video></video>

Sila ambil perhatian perintah

. Dengan arahan ini, kami akan menyimpan pemain video antara peralihan: Apabila menavigasi ke halaman seterusnya, video akan terus bermain, manakala seluruh halaman akan memaparkan kandungan yang dikemas kini. Kita boleh menggunakan komponen ini pada halaman transition:persist dan index.astro: about.astro

<code>// src/pages/index.astro
---
import Video from '../components/Video.astro';
---

<video></video></code>

Akhirnya, kita perlu mengaktifkan penukaran halaman, yang boleh kita aktifkan untuk setiap halaman atau global untuk keseluruhan projek. Dengan mengandaikan bahawa kita mempunyai beberapa jenis fail susun atur, kita boleh dengan mudah membolehkannya dengan mengimport

dari: astro:transitions ViewTransitions Ringkasnya, API Penukaran Pandangan Eksperimen memudahkan penukaran visual antara halaman atau unsur yang berbeza melalui gambar CSS Pseudo-elemen, JavaScript, dan Dom Dom depan dan belakang. Ia memberikan peluang baru untuk meningkatkan prestasi halaman dan meminimumkan kebergantungan pada JavaScript dan CSS adat kompleks.

Atas ialah kandungan terperinci Lihat Peralihan di Astro. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!