انیمیشن ها در ReactJS – آموزش ReactJS

  • جمعه ۲۴ اسفند ۱۳۹۷
  • بازدید ۲۶۹ نفر

reactjs animations 6195 تصویر

انیمیشن ها در ReactJS

در این فصل چگونگی استفاده از انیمیشن ها در ReactJS را بررسی خواهیم کرد.

مرحله اول : نصب React CSS Transitions Group

این یک Add-on برای ReactJS است که به منظور ایجاد انیمیشن و transition های CSS استفاده می شود. با استفاده از دستور زیر می توانید آن را نصب کنید:

مرحله دوم : افزودن فایل CSS

یک فایل جدید با نام style.css ایجاد کنید. مانند نمونه زیر:

برای اینکه بتوانیم از آن در برنامه استفاده کنیم، باید آن را مانند نمونه زیر به عنصر head در index.html اضافه کنیم.

مرحله سوم : نمایش انیمیشن

در مثال زیر ما از عنصر ReactCSSTransitionGroup به عنوان ظرفی برای نگه داری عنصری که می خواهیم با استفاده از انیمیشن آن را نمایش دهیم استفاد کرده ایم. در این مثال از transitionAppear و transitionAppearTimeout استفاده شده است.

محتوای فایل App.jsx:

محتوای فایل main.js:

محتوای فایل css/style.css:

زمانی که برنامه را اجرا کنیم، عنصر موجود در صفحه با انیمیشن ظاهر خواهد شد.

react animations appear 6195 تصویر

مرحله چهارم : انیمیشن Enter و Leave

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

محتوای فایل App.jsx:

محتوای فایل main.js:

محتوای فایل css/style.css:

بعد از اجرای برنامه اگر بر روی دکمه کلیک کنید، صفحه زیر را مشاهده خواهید کرد:

react animations enter prompt 6195 تصویر

زمانی که آیتم جدیدی به لیست اضافه کنیم، این آیتم با انیمیشن نمایش داده می شود:

react animations enter fade in 6195 تصویر

همچنین اگر آیتمی را از لیست حذف کنیم، آن آیتم با انیمیشن حذف خواهد شد:

react animations leave fade out 6195 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است