Cách Add Animations với React Transition Group

Điều kiện để Add Animation với React Transition Group

• Kiến thức React cơ bản
• Kiến thức CSS cơ bản
• Phần mềm chỉnh sửa mã

>>> Đọc thêm: React Reconciliation 

React Transition Group là gì?

React Transition Group được phát triển bởi chính các nhà phát triển React và về cơ bản là một tập hợp các thành phần được thiết kế để tạo hiệu ứng cho các thành phần React khi gắn và tháo.

Chỉ cần nói rõ, nó không phải là một thư viện hoạt hình . Nó chỉ đơn giản là hiển thị các giai đoạn chuyển tiếp để dễ dàng hơn trong việc quản lý các lớp và xử lý các hoạt ảnh khi một thành phần đang vào hoặc thoát ra.

React Transition Group có 4 thành phần mà bạn có thể sử dụng để giúp bạn quản lý và kích hoạt hoạt ảnh Transition:, CSSTransitionvà . 

Thiết lập & Cài đặt

Giả sử bạn đã khởi tạo ứng dụng React, trước tiên hãy cài đặt gói nhóm phản ứng-chuyển tiếp bằng cách sử dụng dòng bên dưới.

npm install react-transition-group

Sau đó, chúng ta nhập 4 thành phần từ gói.

import {Transition, CSSTransition, SwitchTransition, TransitionGroup} from "react-transition-group";

1. Transition component

Bây giờ chúng ta hãy xem xét Transitionthành phần trước. Nó là một thành phần theo dõi khi một thành phần được gắn kết hoặc tháo lắp (nhập hoặc thoát). Đặc biệt, nó theo dõi 4 trạng thái chính sau:

• ‘entering’
• ‘entered’
• ‘exiting’
• ‘exited’

Chúng tôi có thể chuyển bất kỳ giá trị và hiệu ứng nào đến các trạng thái này để kích hoạt các hoạt ảnh của thành phần của chúng tôi.

Chỗ dựa quan trọng nhất của Transitionthành phần là chỗ dựa in. Phần hỗ trợ này có thể được bật để điều khiển khi thành phần bắt đầu trạng thái 'vào' hoặc 'thoát'. Hãy xem đoạn mã ví dụ bên dưới.

const duration = 300;




const defaultStyle = {

  transition: `opacity ${duration}ms ease-in-out`,

  opacity: 0,

  padding: 20,

  display: "inline-block",

  backgroundColor: "#b3d0ff"

};




const transitionStyles = {

  entering: { opacity: 0 },

  entered: { opacity: 1 },

  exiting: { opacity: 1 },

  exited: { opacity: 0 },

};




function App() {

  const [inProp, setInProp] = useState(false);

  return (

    <div>

      <button onClick={() => setInProp(!inProp)}>Click to Show</button>

      <Transition in={inProp} timeout={300}>

        {(state) => (

          <div

            style={{

              ...defaultStyle,

              ...transitionStyles[state]

            }}

          >

            I'm a component that gets a Fade transition!

          </div>

        )}

      </Transition>

    </div>

  );

}

Như đã thấy trong đoạn mã trên, nút sẽ chuyển đổi phần chống đỡ, nút này sẽ chuyển thành phần để kích hoạt trạng thái 'vào' hoặc 'thoát'.

Phần timeout hỗ trợ là khoảng thời gian từ trạng thái 'đi vào' hoặc 'thoát ra' được kích hoạt đến trạng thái 'đã vào' hoặc 'thoát ra'. Do đó, nó cũng là khoảng thời gian của quá trình chuyển đổi.

Trên đây là một số thông tin về Add Animation  trong React, bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về khóa học ReactJS hoặc các khóa học lập trình khác của Viện công nghệ thông tin T3H.