نحوه استفاده از CSSTransition – DEV Community

معرفی

React Transition Group اجازه می دهد تا اجزای انتقال در داخل و خارج از DOM به طور شفاف و کارآمد انجام شود و نیاز به کد دیگ بخار را کاهش دهد.

React Transition Group، بر خلاف بسیاری از کتابخانه های انیمیشن React دیگر، مانند React Spring، اجزای ساده ای را برای تعریف انیمیشن ها ارائه می دهد. کتابخانه سبک‌ها را تعریف نمی‌کند، اما DOM را به روش‌های مفیدی دستکاری می‌کند، و باعث می‌شود که انتقال‌ها و انیمیشن‌ها برای اعمال چالش برانگیز نباشند.

به زبان ساده، React Transition Group رویکرد ساده‌تری برای انیمیشن‌ها و انتقال‌ها ارائه می‌کند.

نحوه نصب react-transition-group

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

پس از آن، ما به چند نمونه عملی از گروه واکنش انتقال و همچنین نگاهی دقیق به اجزای موجود با React Transition Group.

انتقال در جزء React با استفاده از CSS

مؤلفه CSSTransition به شما امکان می دهد از CSS برای اعمال انتقال به عناصر ورودی و خروجی از DOM استفاده کنید. با استفاده از ابزارهای زیر می توانید این کار را انجام دهید:

• in، یک مقدار بولی که برای کنترل ظاهر عنصر استفاده می شود

• timeout، که تعداد میلی ثانیه هایی را که برای ورود یا خروج از DOM طول می کشد را نشان می دهد.

• unmountOnExit، که نشان می دهد وقتی عنصر ناپدید می شود، در واقع به طور کامل DOM را ترک می کند.

استفاده از CSSTransition برای انجام یک انتقال

CSSTransition را می توان به روش های زیر در داخل فایل react خود با کد زیر استفاده کرد:

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import "./index.css";

class App extends Component {
  state = {
    showList: true,
    Navigation: false
  };
  switch = () => {
    this.setState(prevState => ({
      showList: !prevState.showList
    }));
  };
  listSwitch = () => {
    this.setState(state => ({
      Navigation: !state.Navigation
    }));
  };
  render() {
    return (
      <div className="container">
        <button className="display" onClick={this.switch}>
          Navigation
        </button>
        <CSSTransition
          in={this.state.showList}
          timeout={400}
          classNames="list-transition"
          unmountOnExit
          appear
          onEntered={this.listSwitch}
          onExit={this.listSwitch}
        >
          <div className="list-body">
            <ul className="list">
              <li
                className={("list-item", {
                  "list-item--active": 
                 this.state.highlightedHobby
                })}
              >
               Home
              </li>
              <li className="list-item"> About</li>
              <li className="list-item"> Blog</li>
              <li className="list-item"> Contact</li>
            </ul>
          </div>
        </CSSTransition>
      </div>
    );
  }
}
export default App;

حالا بیایید این کد را با جزئیات بررسی کنیم:

این یک جزء کلاس React با دو ویژگی در حالت خود است showList و Navigation.

این showList ویژگی مشخص می کند که آیا یک لیست در حال حاضر قابل مشاهده است یا خیر. هنگامی که کامپوننت ایجاد می شود، آن را روی true تنظیم می کنیم.

این Navigation ویژگی برای ردیابی اینکه آیا ناوبری در حال حاضر قابل مشاهده است یا نه استفاده می شود. وقتی کامپوننت ایجاد می شود، روی false تنظیم می شود.

در کامپوننت دو تابع تعریف شده است:

switch: showList ویژگی با استفاده از این تابع تغییر می کند. حالت قبلی کامپوننت را می گیرد و یک حالت جدید را با آن برمی گرداند showList بر خلاف مقدار قبلی آن تنظیم کنید. هنگامی که کاربر برای نمایش یا پنهان کردن لیست با مؤلفه تعامل می کند، این تابع فراخوانی می شود.

listSwitch: تغییر حالت دهید Navigation دارایی با این تابع وضعیت فعلی مولفه را می گیرد و وضعیت جدیدی را با Navigation برعکس مقدار فعلی آن برمی گرداند. این تابع زمانی فراخوانی می شود که پیمایش ظاهر شود یا ناپدید شود، و برای تغییر حالت ناوبری استفاده می شود.

به طور کلی، این مؤلفه برای مدیریت وضعیت یک لیست و پیمایش، و همچنین برای تغییر قابلیت مشاهده لیست و پیمایش استفاده می شود.

CSSTtransition

برای متحرک سازی ظاهر و ناپدید شدن یک لیست، از مؤلفه CSSTransition استفاده کنید. بیایید نگاهی به ویژگی های مختلفی که به این کامپوننت منتقل می شود بیندازیم:

in={this.state.showList}: این ویژگی کنترل می کند که آیا لیست در حال حاضر قابل مشاهده است یا خیر. با مقدار showList در حالت جزء تعیین می شود.

{timeout=400}: این ویژگی مدت زمان انتقال را بر حسب میلی ثانیه مشخص می کند. در این صورت لیست در 400 میلی ثانیه ظاهر یا ناپدید می شود.

classNames="list-transition": نام کلاس CSS که در طول انتقال به لیست اعمال می شود توسط این ویژگی مشخص می شود. این کلاس باید شامل سبک هایی باشد که نحوه نمایش و ناپدید شدن لیست را تعیین می کند.

unmountOnExit: این ویژگی به کامپوننت دستور می‌دهد که پس از خروج کامپوننت، لیست را از DOM خارج کند.

appear: این ویژگی به کامپوننت دستور می دهد حتی زمانی که برای اولین بار ظاهر می شود از انتقال استفاده کند. اگر می خواهید ظاهر اولیه لیست را متحرک سازید، مفید است.

onEntered={this.listSwitch} و onExit={this.listSwitch}: این ویژگی ها مشخص می کنند که پس از پایان یافتن یا ناپدید شدن لیست، کدام توابع باید فراخوانی شوند. این listSwitch تابع در این مورد فراخوانی می شود تا هرگونه منطق اضافی را که باید هنگام ظاهر شدن یا ناپدید شدن لیست رخ دهد، کنترل کند.

نتیجه

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