Motion

Lima durasi, tiga kurva, dan satu janji: siapa pun yang meminta gerak dikurangi akan mendapatkannya.

Durasi

Gerak di aplikasi kerja bukan pertunjukan. Tugasnya menjelaskan apa yang baru terjadi — dari mana panel itu datang, ke mana penanda pindah — lalu selesai sebelum orang menunggunya. Karena itu tidak ada durasi di atas 300ms.

100msPanel menutup — keluar selalu lebih cepat daripada masukpanelTransition (leave)

150msPanel membuka: dropdown, select, kalender, popoverpanelTransition (enter)

200msWarna, bayangan, dan angkatan tombol; masuk-keluar ModalButton, Modal, SegmentedControl

250msSesuatu yang bergerak menempuh jarak: penanda tab, panel DrawerTabs, Drawer, AppShell

300msNilai yang merayap ke posisi baruProgress, Accordion

Keluar lebih cepat daripada masuk (100 vs 150). Sesuatu yang sudah selesai dibaca tidak perlu diantar keluar dengan sabar; sesuatu yang baru datang perlu waktu untuk diikuti mata.

Kurva

ease-out

Bawaan untuk hampir semua hal: cepat di awal, melambat saat tiba.

cubic-bezier(0.22, 1, 0.36, 1)

Gerak yang menempuh jarak — penanda tab dan tumpukan Toast. Lebih tegas berhentinya daripada ease-out.

cubic-bezier(0.34, 1.25, 0.64, 1)

Satu-satunya gerak yang melewati tujuannya sedikit: knop FormSwitch. Sakelar memang terasa seperti benda.

Tidak ada ease-in untuk sesuatu yang muncul: gerak yang mulai lambat membuat panel terasa berat. Satu-satunya ease-in di library ini dipakai saat panel pergi.

Coba sendiri

Panel yang sama, digeser dengan durasi yang berbeda. 150ms terasa seperti terjadi begitu saja; 500ms terasa seperti menunggu.

Gerak yang dikurangi

Sebagian orang merasa mual atau terganggu oleh gerak di layar, dan sistem operasi menyediakan setelan untuk memintanya berhenti. Setiap transisi di library ini menghormati setelan itu — bukan sebagian, bukan yang besar-besar saja.

vue

<!-- Setiap transisi di library ini berpasangan dengan ini.
     Tujuh belas komponen memakainya; tidak ada pengecualian. -->
<div class="transition-transform duration-250 ease-out motion-reduce:transition-none">

<!-- Untuk animasi keyframe, motion-safe yang dipakai: gerak hanya
     ditambahkan kalau pengguna tidak memintanya berhenti. -->
<span class="motion-safe:animate-progress-slide" />

Yang hilang hanyalah geraknya, bukan informasinya: penanda tab tetap pindah ke tab yang benar, panel tetap terbuka, Progress tetap menunjukkan angkanya. Itu diperiksa test browser, bukan diandaikan — e2e/tabs.spec.ts menjalankan satu kasus dengan reducedMotion: 'reduce' dan memastikan penandanya sampai seketika.