View Transitions API برای فروشگاه: انیمیشن بین لیست و جزئیات بدون JS سنگین

خلاصه: document.startViewTransition عکس محصول را از گرید به هدر جزئیات مورف می‌کند — ۳KB به‌جای ۴۰KB JS.

چرا؟

Framer Motion برای یک مورف ساده ۴۰KB می‌گیرد. View Transitions بومی مرورگر است.

پیاده‌سازی

چک‌لیست

• [ ] viewTransitionName یکتا برای هر محصول
• [ ] تست در Chrome/Safari — فایرفاکس fallback
• [ ] بدون use client اضافی

FAQ

سئو خراب نمی‌شود؟ نه — فقط انیمیشن است، HTML همان است.

با PPR سازگار است؟ بله — transition روی استریم هم کار می‌کند.

هزینه؟ صفر JS.