ماشین حالت React Transition Group: تسلط بر مدیریت وضعیت انیمیشن

انیمیشن‌ها می‌توانند به طور قابل توجهی تجربه کاربری یک برنامه وب را بهبود بخشند، بازخورد بصری ارائه دهند و تعاملات را جذاب‌تر کنند. با این حال، مدیریت وضعیت‌های پیچیده انیمیشن، به ویژه در برنامه‌های دینامیک React، می‌تواند به سرعت چالش‌برانگیز شود. اینجاست که ترکیب React Transition Group و ماشین‌های حالت بسیار ارزشمند است. این مقاله به بررسی چگونگی استفاده از این ابزارها برای ایجاد منطق انیمیشن قوی، قابل نگهداری و اعلانی می‌پردازد.

درک مفاهیم اصلی

React Transition Group چیست؟

React Transition Group (RTG) به خودی خود یک کتابخانه انیمیشن نیست. در عوض، کامپوننتی را فراهم می‌کند که به مدیریت انتقال کامپوننت‌ها به داخل و خارج از DOM کمک می‌کند. این کتابخانه هوک‌های چرخه حیاتی را در اختیار شما قرار می‌دهد که می‌توانید از آنها برای فعال کردن انتقال‌های CSS، انیمیشن‌های CSS یا انیمیشن‌های جاوا اسکریپت استفاده کنید. تمرکز آن بر روی *چه زمانی* کامپوننت‌ها باید انیمیشن داشته باشند است، نه *چگونه* باید انیمیشن داشته باشند.

کامپوننت‌های کلیدی در React Transition Group عبارتند از:

• <Transition>: یک بلوک ساختمانی اصلی برای انیمیشن دادن به یک فرزند واحد. این کامپوننت پراپ `in` را نظارت کرده و انتقال‌های ورود، خروج و ظاهر شدن را فعال می‌کند.
• <CSSTransition>: یک کامپوننت کمکی که کلاس‌های CSS را در طول فازهای انتقال اضافه و حذف می‌کند. این اغلب ساده‌ترین راه برای ادغام انتقال‌ها یا انیمیشن‌های CSS است.
• <TransitionGroup>: مجموعه‌ای از کامپوننت‌های <Transition> یا <CSSTransition> را مدیریت می‌کند. برای انیمیشن دادن به لیست آیتم‌ها، مسیرها یا سایر مجموعه‌های کامپوننت‌ها مفید است.

ماشین حالت چیست؟

ماشین حالت یک مدل ریاضی محاسباتی است که رفتار یک سیستم را توصیف می‌کند. این مدل تعداد محدودی از حالت‌ها، رویدادهایی که باعث انتقال بین این حالت‌ها می‌شوند، و اقداماتی که در طول این انتقال‌ها رخ می‌دهند را تعریف می‌کند. استفاده از ماشین‌های حالت، پیش‌بینی‌پذیری و وضوح را به منطق پیچیده می‌آورد.

مزایای استفاده از ماشین‌های حالت عبارتند از:

• سازماندهی بهتر کد: ماشین‌های حالت یک رویکرد ساختاریافته را برای مدیریت منطق برنامه اعمال می‌کنند.
• افزایش پیش‌بینی‌پذیری: انتقال‌های حالت به صراحت تعریف شده‌اند، که رفتار برنامه را قابل پیش‌بینی‌تر و اشکال‌زدایی آن را آسان‌تر می‌کند.
• قابلیت تست‌پذیری بهبود یافته: ماشین‌های حالت برای تست واحد بسیار مناسب هستند، زیرا هر حالت و انتقال را می‌توان به طور مستقل تست کرد.
• کاهش پیچیدگی: با شکستن منطق پیچیده به حالت‌های کوچکتر و قابل مدیریت، می‌توانید طراحی کلی برنامه خود را ساده‌تر کنید.

کتابخانه‌های محبوب ماشین حالت برای جاوا اسکریپت شامل XState، Robot و Machina.js هستند. برای این مقاله، ما بر روی اصول کلی قابل اجرا در کتابخانه‌های مختلف تمرکز خواهیم کرد، اما مثال‌ها ممکن است به دلیل بیانگری و ویژگی‌های XState، بیشتر به سمت آن متمایل باشند.

ترکیب React Transition Group و ماشین‌های حالت

قدرت اصلی از هماهنگ‌سازی React Transition Group با یک ماشین حالت ناشی می‌شود. ماشین حالت، وضعیت کلی انیمیشن را مدیریت می‌کند و React Transition Group انتقال‌های بصری واقعی را بر اساس وضعیت فعلی مدیریت می‌کند.

مورد استفاده: یک پنجره مودال با انتقال‌های پیچیده

بیایید یک پنجره مودال را در نظر بگیریم که از حالت‌های انتقال مختلفی پشتیبانی می‌کند، مانند:

• Entering (در حال ورود): مودال در حال انیمیشن برای نمایش است.
• Entered (وارد شده): مودال کاملاً قابل مشاهده است.
• Exiting (در حال خروج): مودال در حال انیمیشن برای پنهان شدن است.
• Exited (خارج شده): مودال پنهان است.

می‌توانیم با معرفی حالت‌هایی مانند موارد زیر پیچیدگی بیشتری اضافه کنیم:

• Loading (در حال بارگذاری): مودال قبل از نمایش در حال دریافت داده است.
• Error (خطا): در هنگام بارگذاری داده خطایی رخ داده است.

مدیریت این حالت‌ها با فلگ‌های بولین ساده می‌تواند به سرعت دشوار شود. یک ماشین حالت راه حل بسیار تمیزتری ارائه می‌دهد.

مثال پیاده‌سازی با XState

در اینجا یک مثال ساده با استفاده از XState آورده شده است:

```javascript import React, { useRef } from 'react'; import { useMachine } from '@xstate/react'; import { createMachine } from 'xstate'; import { CSSTransition } from 'react-transition-group'; import './Modal.css'; // فایل CSS خود را وارد کنید const modalMachine = createMachine({ id: 'modal', initial: 'hidden', states: { hidden: { on: { OPEN: 'entering', }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // مدت زمان را در صورت نیاز تنظیم کنید }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // مدت زمان را در صورت نیاز تنظیم کنید }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); return ( <> send('OPEN')}>Open Modal

{children} send('CLOSE')}>Close Modal

); } export default Modal; ``` ```css /* Modal.css */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } /* کلاس‌های انتقال */ .modal-enter { opacity: 0; } .modal-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal-exit { opacity: 1; } .modal-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } ```

توضیح:

• تعریف ماشین حالت: `modalMachine` حالت‌ها (`hidden`, `entering`, `visible`, `exiting`) و انتقال‌های بین آنها (که با رویدادهای `OPEN` و `CLOSE` فعال می‌شوند) را تعریف می‌کند. ویژگی `after` از تأخیر برای انتقال خودکار بین `entering` -> `visible` و `exiting` -> `hidden` استفاده می‌کند.
• کامپوننت React: کامپوننت `Modal` از هوک `useMachine` از `@xstate/react` برای مدیریت ماشین حالت استفاده می‌کند.
• React Transition Group: کامپوننت `CSSTransition` متغیر بولین `isOpen` (که از وضعیت فعلی ماشین حالت مشتق شده است) را نظارت می‌کند. این کامپوننت کلاس‌های CSS (`modal-enter`, `modal-enter-active`, `modal-exit`, `modal-exit-active`) را برای فعال کردن انتقال‌های CSS اعمال می‌کند.
• انتقال‌های CSS: کد CSS انیمیشن‌های واقعی را با استفاده از ویژگی `opacity` و `transition` تعریف می‌کند.

مزایای این رویکرد

• جداسازی مسئولیت‌ها: ماشین حالت منطق انیمیشن را مدیریت می‌کند، در حالی که React Transition Group انتقال‌های بصری را بر عهده دارد.
• کد اعلانی: ماشین حالت، حالت‌ها و انتقال‌های مورد نظر را تعریف می‌کند، که باعث می‌شود کد آسان‌تر فهمیده و نگهداری شود.
• قابلیت تست‌پذیری: ماشین حالت را می‌توان به راحتی به صورت مجزا تست کرد.
• انعطاف‌پذیری: این رویکرد را می‌توان برای مدیریت انیمیشن‌ها و تعاملات پیچیده‌تر گسترش داد.

تکنیک‌های پیشرفته

انتقال‌های پویا بر اساس حالت

شما می‌توانید انتقال‌ها را بر اساس وضعیت فعلی سفارشی کنید. به عنوان مثال، ممکن است بخواهید از یک انیمیشن متفاوت برای ورود و خروج مودال استفاده کنید.

```javascript const modalMachine = createMachine({ id: 'modal', initial: 'hidden', context: { animationType: 'fade', }, states: { hidden: { on: { OPEN_FADE: { target: 'entering', actions: assign({ animationType: 'fade' }), }, OPEN_SLIDE: { target: 'entering', actions: assign({ animationType: 'slide' }), }, }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // مدت زمان را در صورت نیاز تنظیم کنید }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // مدت زمان را در صورت نیاز تنظیم کنید }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); const animationType = state.context.animationType; let classNames = `modal ${animationType}` return ( <> send('OPEN_FADE')}>Open Modal (Fade) send('OPEN_SLIDE')}>Open Modal (Slide)

{children} send('CLOSE')}>Close Modal

); } ``` ```css /* Modal.css */ /* CSS موجود */ /* انیمیشن Fade */ .modal.fade-enter { opacity: 0; } .modal.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal.fade-exit { opacity: 1; } .modal.fade-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } /* انیمیشن Slide */ .modal.slide-enter { transform: translateY(-100%); opacity: 0; } .modal.slide-enter-active { transform: translateY(0); opacity: 1; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } .modal.slide-exit { transform: translateY(0); opacity: 1; } .modal.slide-exit-active { transform: translateY(-100%); opacity: 0; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } ```

در این مثال، `animationType` در کانتکست ماشین حالت ذخیره می‌شود. رویدادهای `OPEN_FADE` و `OPEN_SLIDE` این کانتکست را به‌روز می‌کنند و کامپوننت `Modal` از این مقدار برای ساختن پویای پراپ `classNames` برای کامپوننت `CSSTransition` استفاده می‌کند.

انیمیشن دادن به لیست‌ها با TransitionGroup

کامپوننت `TransitionGroup` از React Transition Group برای انیمیشن دادن به لیست آیتم‌ها ایده‌آل است. هر آیتم در لیست می‌تواند در یک کامپوننت `CSSTransition` پیچیده شود و `TransitionGroup` انیمیشن‌های ورود و خروج را مدیریت خواهد کرد.

```javascript import React, { useState, useRef } from 'react'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import './List.css'; function List() { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']); const addItem = () => { setItems([...items, `Item ${items.length + 1}`]); }; const removeItem = (index) => { setItems(items.filter((_, i) => i !== index)); }; return ( ); } export default List; ``` ```css /* List.css */ .list-group { margin-top: 20px; } .list-item { background-color: #f0f0f0; padding: 10px; margin-bottom: 5px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .list-item-enter { opacity: 0; transform: translateX(-100%); } .list-item-enter-active { opacity: 1; transform: translateX(0); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .list-item-exit { opacity: 1; transform: translateX(0); } .list-item-exit-active { opacity: 0; transform: translateX(-100%); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } ```

نکات کلیدی:

• هر آیتم لیست در یک `CSSTransition` پیچیده شده است.
• پراپ `key` در `CSSTransition` برای React حیاتی است تا بتواند تشخیص دهد کدام آیتم‌ها اضافه یا حذف می‌شوند.
• `TransitionGroup` انتقال‌های تمام کامپوننت‌های فرزند `CSSTransition` را مدیریت می‌کند.

استفاده از انیمیشن‌های جاوا اسکریپت

در حالی که انتقال‌های CSS اغلب ساده‌ترین راه برای انیمیشن دادن به کامپوننت‌ها هستند، شما همچنین می‌توانید برای افکت‌های پیچیده‌تر از انیمیشن‌های جاوا اسکریپت استفاده کنید. React Transition Group هوک‌های چرخه حیاتی را فراهم می‌کند که به شما امکان می‌دهد انیمیشن‌های جاوا اسکریپت را با استفاده از کتابخانه‌هایی مانند GreenSock (GSAP) یا Anime.js فعال کنید.

به جای `classNames`، از پراپ‌های `onEnter`، `onEntering`، `onEntered`، `onExit`، `onExiting` و `onExited` کامپوننت `Transition` برای کنترل انیمیشن استفاده کنید.

بهترین شیوه‌ها برای توسعه جهانی

هنگام پیاده‌سازی انیمیشن‌ها در یک زمینه جهانی، مهم است که عواملی مانند دسترسی‌پذیری، عملکرد و حساسیت‌های فرهنگی را در نظر بگیرید.

دسترسی‌پذیری

• احترام به ترجیحات کاربر: به کاربران اجازه دهید در صورت تمایل انیمیشن‌ها را غیرفعال کنند (مثلاً با استفاده از مدیا کوئری `prefers-reduced-motion`).
• ارائه جایگزین‌ها: اطمینان حاصل کنید که تمام اطلاعات ضروری حتی در صورت غیرفعال بودن انیمیشن‌ها نیز منتقل می‌شوند.
• استفاده از انیمیشن‌های ظریف: از انیمیشن‌های بیش از حد یا حواس‌پرت‌کن که می‌توانند طاقت‌فرسا باشند یا باعث بیماری حرکت شوند، خودداری کنید.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که تمام عناصر تعاملی از طریق ناوبری با صفحه‌کلید قابل دسترسی هستند.

عملکرد

• بهینه‌سازی انیمیشن‌ها: برای انیمیشن‌های روان از transformها و opacity در CSS استفاده کنید. از انیمیشن دادن به ویژگی‌های چیدمان مانند `width` و `height` خودداری کنید.
• استفاده از Debounce و Throttle: فرکانس انیمیشن‌هایی که توسط ورودی کاربر فعال می‌شوند را محدود کنید.
• استفاده از شتاب‌دهنده سخت‌افزاری: اطمینان حاصل کنید که انیمیشن‌ها توسط مرورگر با شتاب‌دهنده سخت‌افزاری اجرا می‌شوند.

حساسیت‌های فرهنگی

• اجتناب از کلیشه‌ها: هنگام استفاده از انیمیشن‌ها، مراقب کلیشه‌های فرهنگی باشید.
• استفاده از تصاویر فراگیر: تصاویری را انتخاب کنید که نماینده مخاطبان متنوع باشد.
• در نظر گرفتن زبان‌های مختلف: اطمینان حاصل کنید که انیمیشن‌ها با زبان‌ها و جهت‌های نوشتاری مختلف (مانند زبان‌های راست به چپ) به درستی کار می‌کنند.

مشکلات رایج و راه‌حل‌ها

فعال نشدن انیمیشن

مشکل: انیمیشن هنگام ورود یا خروج کامپوننت شروع نمی‌شود.

راه‌حل:

• بررسی نام کلاس‌ها: اطمینان حاصل کنید که نام کلاس‌های CSS استفاده شده در پراپ `classNames` کامپوننت `CSSTransition` با نام کلاس‌های تعریف شده در فایل CSS شما مطابقت دارد.
• بررسی Timeout: مطمئن شوید که پراپ `timeout` به اندازه کافی طولانی است تا انیمیشن کامل شود.
• بررسی DOM: از ابزارهای توسعه‌دهنده مرورگر خود برای بررسی DOM استفاده کنید و تأیید کنید که کلاس‌های CSS صحیح اعمال می‌شوند.
• مشکل پراپ Key در لیست‌ها: هنگام انیمیشن دادن به لیست‌ها، نبودن یا منحصر به فرد نبودن پراپ 'key' در کامپوننت‌های Transition یا CSSTransition اغلب باعث ایجاد مشکل می‌شود. اطمینان حاصل کنید که کلیدها بر اساس شناسه‌های پایدار و منحصر به فرد برای هر آیتم در لیست هستند.

لرزش یا تأخیر در انیمیشن

مشکل: انیمیشن روان نیست و به نظر می‌رسد لرزش یا تأخیر دارد.

راه‌حل:

• بهینه‌سازی CSS: برای انیمیشن‌های روان‌تر از transformها و opacity در CSS استفاده کنید. از انیمیشن دادن به ویژگی‌های چیدمان خودداری کنید.
• شتاب‌دهنده سخت‌افزاری: اطمینان حاصل کنید که انیمیشن‌ها با شتاب‌دهنده سخت‌افزاری اجرا می‌شوند.
• کاهش به‌روزرسانی‌های DOM: تعداد به‌روزرسانی‌های DOM را در طول انیمیشن به حداقل برسانید.

عدم حذف کامپوننت (Unmount)

مشکل: کامپوننت پس از اتمام انیمیشن خروج، حذف (unmount) نمی‌شود.

راه‌حل:

• استفاده از `unmountOnExit`: پراپ `unmountOnExit` کامپوننت `CSSTransition` را به `true` تنظیم کنید تا اطمینان حاصل شود که کامپوننت پس از انیمیشن خروج، حذف می‌شود.
• بررسی منطق ماشین حالت: تأیید کنید که ماشین حالت پس از اتمام انیمیشن به درستی به حالت `hidden` یا `exited` منتقل می‌شود.

نتیجه‌گیری

ترکیب React Transition Group و ماشین‌های حالت یک رویکرد قدرتمند و قابل نگهداری برای مدیریت وضعیت انیمیشن در برنامه‌های React فراهم می‌کند. با جداسازی مسئولیت‌ها، استفاده از کد اعلانی و پیروی از بهترین شیوه‌ها، می‌توانید تجربیات کاربری جذاب و قابل دسترسی ایجاد کنید که قابلیت استفاده و جذابیت برنامه شما را افزایش می‌دهد. به یاد داشته باشید که هنگام پیاده‌سازی انیمیشن‌ها برای مخاطبان جهانی، دسترسی‌پذیری، عملکرد و حساسیت‌های فرهنگی را در نظر بگیرید.

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

منابع بیشتر

• مستندات React Transition Group
• مستندات XState
• کتابخانه انیمیشن GreenSock (GSAP)
• کتابخانه انیمیشن Anime.js