کامپوننتهای React Aria برای ساخت رابط کاربری قابلدسترس و بدون وابستگی به استایل آماده شدهاند؛ یعنی از نظر تعامل با ماوس، لمس و کیبورد عملکرد خوبی دارند، اما بهصورت پیشفرض نه استایلی دارند و نه انیمیشنی. نتیجه این است که پاپاورها ناگهان ظاهر میشوند، مودالها یکباره باز میشوند و خبری از نرمی و ظرافت در حرکت نیست.
اگر روی یک ابزار داخلی کار میکنید، شاید این رفتار کاملاً قابلقبول باشد. اما در محصولی که کاربر نهایی با آن سروکار دارد، انیمیشنهای نرم و حسابشده میتوانند حس کیفیت و حرفهای بودن را منتقل کنند.
خوشبختانه React Aria راههای ساده و شفافی برای اضافه کردن انیمیشن در اختیار شما میگذارد؛ از ترنزیشنهای سبک CSS گرفته تا انیمیشنهای پیشرفتهتر. در ادامه، روشهای اصلی را مرور میکنیم.
استفاده از CSS Transition با data stateها
سادهترین راه برای انیمیشندار کردن کامپوننتهای React Aria این است که فقط از CSS استفاده کنید و سراغ هیچ کتابخانه جاوااسکریپتی نروید.
کامپوننتهای Overlay در React Aria مثل Popover، Modal، ModalOverlay، Tray و Menu بهصورت خودکار stateهایی مثل data-entering و data-exiting را در اختیار شما میگذارند.
این data attributeها هنگام mount و unmount شدن کامپوننت بهطور خودکار اعمال میشوند. نکته مهم اینجاست که React Aria قبل از حذف عنصر از DOM، صبر میکند تا انیمیشن خروج شما تمام شود.
.react-aria-Popover { transition: opacity 200ms, translate 200ms;
} .react-aria-Popover[data-entering],
.react-aria-Popover[data-exiting] { opacity: 0; translate: 0 -8px;
}با همین چند خط CSS، پاپاور هنگام باز شدن با افکت محوشدن و کمی جابهجایی عمودی نمایش داده میشود و هنگام بسته شدن هم همین مسیر را برعکس طی میکند.
- مرورگر زمانبندی انیمیشن را مدیریت میکند.
- نیازی به جاوااسکریپت اضافه ندارید.
- وابستگی جدیدی به پروژه اضافه نمیشود.
این الگو برای هر کامپوننتی که بهصورت شرطی mount میشود کاربرد دارد. وجود data-exiting بسیار مهم است؛ چون اگر این state وجود نداشت، عنصر بلافاصله از DOM حذف میشد و عملاً فرصت دیدن انیمیشن خروج را نداشتید. React Aria این زمانبندی را برای شما مدیریت میکند.
استفاده از CSS Keyframes
اگر ترجیح میدهید بهجای transition از @keyframes استفاده کنید، این روش هم کاملاً با React Aria سازگار است.
.react-aria-Popover[data-entering] { animation: popover-enter 200ms ease-out;
} .react-aria-Popover[data-exiting] { animation: popover-exit 150ms ease-in;
} @keyframes popover-enter { from { opacity: 0; translate: 0 -8px; }
} @keyframes popover-exit { to { opacity: 0; translate: 0 -4px; }
}مزیت اصلی keyframes این است که میتوانید برای ورود و خروج، زمانبندی و easing متفاوت تعریف کنید. مثلاً:
- ورود با ease-out تا حرکت در انتها نرمتر شود.
- خروج با ease-in تا انیمیشن سریعتر شروع شود و بهتدریج محو شود.
اگر میخواهید کنترل بیشتری روی جزئیات حرکت داشته باشید، keyframes گزینه منعطفتری نسبت به transition هستند.
کدام کامپوننتها از data-entering پشتیبانی میکنند؟
همه کامپوننتهای React Aria این stateها را ندارند. این قابلیت بیشتر برای کامپوننتهای Overlay در نظر گرفته شده؛ یعنی همانهایی که بهصورت شرطی وارد DOM میشوند.
کامپوننتهای پشتیبانیشده
- Popover
- Modal و ModalOverlay
- Menu
- Select
اگر با این دسته از کامپوننتها کار میکنید، اضافه کردن انیمیشن بسیار ساده است و معمولاً با چند خط CSS قابل انجام خواهد بود.
کدام روش بهتر است؟
انتخاب بین transition و keyframes به نیاز پروژه بستگی دارد.
- Transition برای انیمیشنهای ساده، سبک و سریع مناسب است.
- Keyframes وقتی بهتر جواب میدهد که بخواهید برای ورود و خروج رفتار متفاوتی تعریف کنید.
- اگر پروژه شما به انیمیشنهای پیچیدهتر و فیزیکمحور نیاز دارد، میتوانید سراغ ابزارهای پیشرفتهتر بروید.
