C✳CODEZ.WIN
🌐 Bahasa Indonesia

Panduan membaca yang dilokalisasi

vercel-react-view-transitionsTujuan, penggunaan, dan sumber

Panduan untuk mengimplementasikan animasi yang halus dan terasa alami menggunakan API Transisi Tampilan React ( component, tambahkanJenisTransisi, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, mulaiTransisiTampilan, ViewTransition, jenis transisi, atau menanyakan tentang animasi antar status UI di React tanpa pustaka animasi pihak ketiga.

Sumber diambil:

Repositori sumber
vercel-labs/agent-skills
SKILL.md
skills/react-view-transitions/SKILL.md
Bintang Repositori
33,269
Pembaruan terakhir repositori
2026-10-29
Klasifikasi Kemampuan
Pengembangan
Waktu pengumpulan terbaru

Lisensi: Tidak ditentukan

SKILL.md asliREADME bahasa Inggris

Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.

Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.

Apa yang dilakukan oleh Skill ini?

Panduan untuk mengimplementasikan animasi yang halus dan terasa alami menggunakan API Transisi Tampilan React ( component, tambahkanJenisTransisi, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, mulaiTransisiTampilan, ViewTransition, jenis transisi, atau menanyakan tentang animasi antar status UI di React tanpa pustaka animasi pihak ketiga.

Bagaimana alur kerja hulu bekerja

Alur Kerja Implementasi

Saat menambahkan transisi tampilan ke aplikasi yang sudah ada, ikuti langkah-langkah berikut.references/implementation.mdLangkah demi langkah. Mulailah dengan audit — jangan dilewati. Gunakanreferences/css-recipes.mdGunakan CSS yang sesuai dan sesuaikan dengan aplikasi.

Jalur hulu · L51 ↗

Kapan Harus Membuat Animasi?

Setiap harus mengkomunikasikan hubungan atau kesinambungan spasial. Jika Anda tidak dapat mengartikulasikan apa yang dikomunikasikan, jangan menambahkannya. Terapkan semua pola yang berlaku dari daftar ini, dalam urutan ini: Ini adalah urutan implementasi, bukan daftar "pilih satu". Terapkan setiap pola yang sesuai dengan aplikasi. Lewati pola hanya jika aplikasi tidak memiliki kasus penggunaan untuk pola tersebut.

Jalur hulu · L14 ↗

Transisi Tampilan React

Animasikan perubahan antar status UI menggunakan fitur bawaan browser.document.startViewTransitionNyatakan *apa* dengan , trigger *when* with mulaiTransisi / gunakanNilaiTertunda / Suspense, kendalikan *bagaimana* dengan kelas CSS. Browser yang tidak didukung akan melewati animasi dengan baik.

Jalur hulu · L10 ↗
Jalur hulu · jsx ↗
import { ViewTransition } from 'react';

<ViewTransition>
  <Component />
</ViewTransition>

Persyaratan dan pengaturan

Tidak ada bagian persyaratan singkat yang dipilih dari file ini. Ini tidak berarti Skill tersebut tidak memiliki dependensi. Periksa petunjuk pengaturan repositori dan file yang dirujuk.

Batasan dan pemeriksaan kualitas

Keterbatasan VT Bersarang

Ketika orang tua VTmounts/unmountsSebagai satu kesatuan dengan VT bersarang di dalamnya, VT bersarang tersebut tidak akan menembakkan VT-nya sendiri.enter/exit— hanya VT terluar yang beranimasi. (VT anak yang dipasang di dalam VT induk *persisten* akan aktif)enter/exit(Biasanya.) Animasi bertahap per item selama navigasi halaman saat ini tidak tersedia diNext.js; lihat pemecahan masalah untuk status eksperimental hulu.

Jalur hulu · L304 ↗

Mulailah dengan uji coba yang aman.

  1. Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
  2. Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
  3. Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
  4. Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.

Spesifikasi format dan direktori keterampilan ↗

Baca selengkapnya di sumber aslinya.

Terjemahan dan ruang lingkup

Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.

Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.

Sumber yang disematkan
Baca teks aslinya ↗
Sumber diambil
Komit sumber
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
Sumber SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a
Kembali ke katalog Keterampilan lengkap