Navigatsiya · pattern
Sahifa ötişlari (View Transitions)
View Transitions presetlari (4.28): <html data-fx-vt="fade|axis|slide"> — sahifalararo (MPA) ötiş: fade — öçib-yoniş (M3 fade-through), axis — gorizontal öq böyiça qisqa siljiş (shared axis), slide — mobil stek kabi suriliş; tarix böyiça orqaga ötişda yönaliş teskari, RTL'da közgulanadi. Bir sahifa içida: fxTransition(() => yangilaş, { type: 'back' }). Umumiy element — container transform (4.29): röyxatdagi karta va tafsilot sahifasida bir xil data-vt-name — rasm va sarlavha «uçib» ötadi; bir sahifa içida fxMorph(karta, panel, oçiş). fx-vt-static — ötişda joyida turadigan header. Hammasi prefers-reduced-motion va data-fx-motion="none"da öçadi; qöllanmasa sahifa oddiy almaşadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-vt | fadeaxisslide | fade |
Anatomiya
- root
:root[data-fx-vt]şart - morph
*.fx-morphixtiyoriy - static
.fx-vt-staticixtiyoriy
Holatlar
Klaviatura va kiriş
Ötiş fokus va DOM tartibini özgartirmaydi; prefers-reduced-motion va data-fx-motion="none"da animatsiya umuman yöq. Sahifa ötişi xulqsiz ham işlaşi uçun @view-transition { navigation: auto } ni sahifa CSS'iga özingiz ham yozişingiz mumkin (xulq uni harakat kamaytirilmaganda qöşadi).
Kod
AI uçun: qaçon işlatiladi
- Köp sahifali sayt yoki kabinetda sahifalar orasida silliq ötiş.
- Röyxat → tafsilot: karta rasmi va sarlavhasi tafsilot sahifasiga «uçib» ötadi.
- Bir sahifa içida köriniş almaşinuvi (jadval ↔ kartalar, qadam ↔ qadam).
- Panel yoki dialog oçilişi (öz animatsiyasi bor) →
dialog - Tablar orasida almaşiş →
tabs - data-vt-name'ni sahifada takrorlamang — bir xil nom ikki elementda bölsa ötiş bekor böladi (fx-vt-static ham sahifada bitta).
- Har bir kiçik özgarişni (filtr, hover) View Transition bilan öramang — sahifa yoki köriniş almaşinuvi uçun.
- Animatsiya tugaşini kutib ma'lumot yuklamang: ötiş faqat bezak, DOM darhol yangilanadi.
npx foxui add vt
<!-- har ikki sahifada: <html lang="uz" data-fx-vt="axis"> -->
<header class="fx-vt-static" style="padding: var(--fx-space-3) 0"><strong>Mijozlar</strong></header>
<div class="fx-grid" data-min="sm" data-gap="4">
<a class="fx-card" href="#bitim-12" data-fx-vt data-vt-name="bitim-12" style="color: inherit; text-decoration: none">
<h3 class="fx-card__title">«Ofis mebeli» bitimi</h3>
<p class="fx-card__text">18 400 000 söm · muzokara</p>
</a>
<a class="fx-card" href="#bitim-13" data-fx-vt data-vt-name="bitim-13" style="color: inherit; text-decoration: none">
<h3 class="fx-card__title">«Server ijarasi» bitimi</h3>
<p class="fx-card__text">6 200 000 söm · taklif yuborildi</p>
</a>
</div>
<button class="fx-btn" type="button" onclick="fxTransition(() => document.querySelector('.fx-grid').classList.toggle('fx-stack'), { type: 'forward' })">Körinişni almaştiriş</button>Tokenlar: --fx-ease-emphasized --fx-ease-enter --fx-ease-exit --fx-ease-sheet --fx-motion-exit-base --fx-motion-exit-fast --fx-motion-exit-slow --fx-motion-scale-enter --fx-motion-shift-lg --fx-motion-slow --fx-motion-slower