یک کامپوننت داخلی React برای انیمیشن‌های نرم، بدون هیچ کتابخانه‌ی اضافه

اگر تا حالا برای انیمیت کردن ورود و خروج کامپوننت‌ها سراغ framer-motion یا کدنویسی دستی با CSS transition رفته‌اید، خبر خوب اینه که دیگه لازم نیست.

در React نسخه‌ی ۱۹.۳ (منتشرشده ۹ سپتامبر ۲۰۲۶) کامپوننت ViewTransition رو به‌صورت رسمی و پایدار عرضه کرده؛ یعنی بعد از یک دوره‌ی طولانی experimental بودن، حالا می‌شه توی پروژه‌ی پروداکشن ازش استفاده کرد.
این کامپوننت روی View Transitions API خود مرورگر سوار شده و خودش تشخیص می‌ده که تغییر درخت کامپوننت‌ها چه نوعیه:
اضافه‌شدن (enter)، حذف‌شدن (exit)، تغییر محتوا یا استایل (update)، یا جابه‌جایی یک المان بین دو مکان مختلف (share).

رفتار پیش‌فرضش یک کراس‌فید نرمه، ولی کاملاً قابل شخصی‌سازی با CSS View Transition Classes یا Web Animations API هست.

نکته‌ی جالب‌تر، تابع addTransitionType هست که می‌ذاره انیمیشن رو بر اساس علت تغییر state مشخص کنید؛ مثلاً برای اسلایدر بگید حرکت به جلو از راست بیاد و حرکت به عقب از چپ.

import { ViewTransition, startTransition, addTransitionType } from 'react';

function nextSlide() {
  startTransition(() => {
    addTransitionType('next');
    setCurrentSlide(c => c + 1);
  });
}

<ViewTransition
  enter={{ next: 'from-right', previous: 'from-left' }}
  exit={{ next: 'to-left', previous: 'to-right' }}
>
  <Page />
</ViewTransition>

این کامپوننت با startTransition، Suspense و useDeferredValue هم به‌خوبی کار می‌کنه، یعنی می‌تونید حتی fallback یک Suspense رو هم به محتوای نهایی به‌شکل نرم انیمیت کنید.

#React #فرانت_اند #برنامه_نویسی #جاوااسکریپت #وب

Sources:
• React 19.3

کانال آموزشی کدنایت | آموزش برنامه نویسی

https://t.me/codenight_ir