Sahifa o'tish animatsiyasi (page transition) β bu foydalanuvchi link bossagandan keyin sahifalar o'rtasidagi vizual o'tish. Klassik veb sahifa: link bosgach, ekran oq bo'lib qolib, yangi sahifa darrov ko'rsatiladi. Modern yondashuv: smooth transition β fade, slide, scale effect bilan. Bu UX'da sezilarli yaxshilanish va sayt \"professional\" tuyiladi.
Klassik vs SPA page navigation
Klassik veb sayt (multi-page): link bosgach, brauzer yangi sahifa request qiladi, server yuboradi, brauzer render qiladi. Foydalanuvchi oq ekranni ko'radi (200-1000ms davomida).
SPA (Single Page Application β React, Vue, Angular): sahifa allaqachon yuklangan, JavaScript yangi kontent render qiladi. Smooth transition imkoniyat β animation bilan.
Page transition turlari
Fade β eski sahifa fade-out, yangi fade-in. Eng oddiy va universal.
Slide β eski sahifa chap'ga, yangi o'ng'dan kiradi. Mobile app feel.
Scale β eski sahifa kichrayadi, yangi katta keladi. Vizual jihatdan kuchli.
Push/Cover β yangi sahifa eski'ning ustiga keladi.
Crossfade β ikkalasi bir vaqtda almashinadi.
Page transition tools
SPA framework'larda native support:
React: Framer Motion, React Transition Group.
Vue: Vue Transition (built-in), Vue Transition Group.
Next.js: built-in route transitions, Framer Motion.
Nuxt: built-in pageTransition.
Klassik sayt'da page transition
Multi-page sayt'da ham transition mumkin. Strategiya: View Transitions API (yangi web standard).
Yoki PJAX/Turbo Drive β sahifa kontentini AJAX bilan yuklash, smooth o'tish.
Astro: View Transitions native support.
View Transitions API
2024'dan beri brauzer support. Klassik multi-page sayt uchun smooth transition:
document.startViewTransition(() => {
// Update DOM
});
Chrome, Edge support. Firefox, Safari coming.
Transition timing
Optimal: 200-400ms. Tez bo'lishi shart β foydalanuvchi sabr qilmaydi.
Sekin (600ms+): foydalanuvchini bezor qiladi.
Mobile app'larda 200-300ms standard.
Easing functions
Ease-out β boshida tez, oxirida sekin. Tabiiy.
Cubic-bezier β custom. Material Design \"standard easing\" cubic-bezier(0.4, 0, 0.2, 1).
Direction bilan ishlash
Slide transition: yangi sahifa qaysi tomondan kelishi mantiqiy bo'lishi shart.
Keyingi sahifa: o'ngdan chapga slide.
Orqaga (back): chapdan o'ngga.
Drilling down (chuqurroq): pastdan yuqoriga.
Loading state transition'da
Transition davomida loading indicator β foydalanuvchi bilishi shart sahifa kelyapti.
Skeleton loading β fade-in bilan.
Yoki progress bar yuqorida.
Initial page load
Birinchi sahifa yuklanishida ham animation. Hero element'lar sequentially fade-in: avval rasm, keyin sarlavha, oxirgi tugma.
Staggered animation β har element 100-200ms delay bilan.
Performance
Animation GPU-accelerated bo'lishi shart. Transform va opacity.
will-change: transform β brauzerga animation bo'lishini aytadi.
Mobile'da ehtiyot β slow qurilma jerky bo'lishi mumkin.
Mobile page transitions
Mobile app'da slide transition natural. Mobile veb'da ham mos.
iOS Safari swipe back β native browser gesture. Custom transition bilan ehtiyot.
Accessibility
prefers-reduced-motion media query. Foydalanuvchi animation kamaytirish xohlasa β transition ham reduce yoki off.
aria-live=\"polite\" β yangi sahifa kelganda screen reader xabardor.
SEO va page transitions
SPA bilan page transition β Google indekslash muammosi.
Server-Side Rendering (SSR) yoki Static Site Generation (SSG) bilan SEO saqlanadi va transition ham.
Next.js, Nuxt β SSR + smooth transition.
Common page transition xato
1. Slow (600ms+) β bezor qiladi.
2. Yangi sahifa kelayotganini ko'rsatmaslik β foydalanuvchi nima sodir bo'layotganini bilmaydi.
3. Janrish (irregular) animation β performance muammo.
4. Mobile'da swipe gestures bilan conflict.
5. Accessibility ignorate.
Misol use case'lar
Apple sayti: fade transitions, kuchli vizual brand.
Stripe: smooth scale transitions.
Linear: app-like transitions.
Vercel: subtle fade transitions.
Klassik sayt'da minimal transition
SPA shart emas β klassik sayt'da ham subtle transition mumkin.
CSS bilan: body { opacity: 0; transition: opacity 0.3s; }. JS bilan onload da opacity 1.
Yangi sahifa fade-in.
Sayt.uz page transition
Sayt.uz klassik PHP sayt β full SPA emas. Lekin subtle page transitions:
Initial page load: hero element'lar staggered fade-in (100ms delay).
Link click: oq screen oldini olish uchun preload links (prefetch).
View Transitions API: Chrome/Edge'da smooth transition. Boshqa brauzer'larda klassik.
Mobile: native-like transitions.
prefers-reduced-motion: animation o'chiriladi.
Natija: sayt smooth tuyiladi. Bounce rate 12% (animation'siz 18% edi).