ReactJS - Hoạt hóa các Component

Xin chào các nhà pháp sư tương lai của React animation! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy thú vị vào thế giới các animation của ReactJS. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng animation chính là gia vị bí mật giúp ứng dụng của bạn không chỉ hoạt động mà còn thực sự thú vị. Vậy chúng ta cùng nhảy vào và làm cho các component của mình nhảy múa nào!

Phép màu của React Transition Group

Trước khi chúng ta bắt đầu玩 với animation, hãy hiểu React Transition Group là gì. Hãy tưởng tượng nó như một bộ công cụ đầy những thiết bị hữu ích giúp chúng ta tạo ra những transition mượt mà, bắt mắt trong ứng dụng React của mình.

Cài đặt React Transition Group

Đầu tiên, chúng ta cần mời React Transition Group vào bữa tiệc dự án của mình. Mở terminal và gõ:

npm install react-transition-group

hoặc nếu bạn là fan của yarn:

yarn add react-transition-group

Tuyệt vời! Bây giờ chúng ta đã có siêu năng lực animation trong tầm tay.

Transition: Nền tảng của Animations

Component Transition giống như nền móng của một ngôi nhà. Nó cung cấp cho chúng ta một cơ sở vững chắc để xây dựng animation. Hãy cùng xem nó trong hành động với một ví dụ đơn giản:

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

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

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
Tôi là văn bản mờ dần!
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
Nhấn để Mờ dần
</button>
</div>
);
};

Hãy phân tích này:

1. Chúng ta import Transition từ 'react-transition-group'.
2. Chúng ta thiết lập một số style: defaultStyle cho trạng thái ban đầu, và transitionStyles cho các giai đoạn khác nhau của transition.
3. Component FadeInOut sử dụng state inProp để kiểm soát tính hiển thị.
4. Component Transition nhận hai prop chính: in (trạng thái hiển thị) và timeout (thời gian của animation).
5. Trong Transition, chúng ta sử dụng một hàm nhận trạng thái transition hiện tại và áp dụng style phù hợp.

Khi bạn nhấn nút, bạn sẽ thấy văn bản mờ vào và mờ ra một cách mượt mà. Thật kỳ diệu, phải không?

CSSTransition: Khi CSS Gặp React

Bây giờ, hãy nâng cấp trò chơi của chúng ta với CSSTransition. Nó giống như anh em cool hơn của Transition mà hoạt động mượt mà với các class CSS. Dưới đây là một ví dụ thú vị:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // Chúng ta sẽ tạo này trong giây lát

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

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
Tôi là một Siêu nhân!
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
Biến đổi!
</button>
</div>
);
};

Và đây là CSS của chúng ta (trong styles.css):

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

Dưới đây là những gì đang xảy ra:

1. Chúng ta sử dụng CSSTransition thay vì Transition.
2. Chúng ta chỉ định classNames="super", điều này告诉 React sử dụng các class như super-enter, super-enter-active, v.v.
3. CSS của chúng ta định nghĩa cách component nên trông trong mỗi giai đoạn của transition.

Khi bạn nhấn "Biến đổi!", siêu nhân của chúng ta sẽ xuất hiện và biến mất với hiệu ứng缩放. Nó giống như xem một bộ phim siêu nhân, nhưng trong trình duyệt của bạn!

TransitionGroup: Quản lý Nhiều Transition

Cuối cùng, hãy nói về TransitionGroup. Nó giống như một người chỉ huy trong dàn nhạc, quản lý nhiều transition cùng một lúc. Dưới đây là một ví dụ thực tế:

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Nhập một nhiệm vụ"
/>
<button onClick={addItem}>Thêm</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

Và CSS tương ứng (list-styles.css):

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

Ví dụ này tạo ra một danh sách todo đơn giản nơi các mục fade vào khi được thêm vào và fade ra khi bị xóa. Dưới đây là phân tích:

1. Chúng ta sử dụng TransitionGroup để bao quanh danh sách các mục.
2. Mỗi mục được bao quanh bởi một CSSTransition.
3. Khi các mục được thêm hoặc xóa, TransitionGroup quản lý các transition tự động.

Kết quả? Một danh sách todo mượt mà, chuyên nghiệp mà bất kỳ quản lý dự án nào cũng sẽ tự hào!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của React animations, từ Transition cơ bản đến TransitionGroup mạnh mẽ. Hãy nhớ rằng, animation không chỉ là về việc làm cho mọi thứ trông đẹp hơn (dù đó là một phần thưởng tuyệt vời). Chúng về việc tạo ra các giao diện trực quan, phản hồi mà hướng dẫn người dùng qua ứng dụng của bạn.

Dưới đây là bảng tham khảo nhanh các phương thức chúng ta đã覆盖:

Component	Use Case	Key Props
Transition	Transition cơ bản	in, timeout
CSSTransition	Transition dựa trên CSS	in, timeout, classNames
TransitionGroup	Quản lý nhiều transition	component (tùy chọn)

Bây giờ, hãy tiến lên và animate! Và nhớ rằng, với quyền lực lớn đến với trách nhiệm lớn. Sử dụng animation một cách khôn ngoan, và người dùng của bạn sẽ cảm ơn bạn. Chúc mừng coding!

Credits: Image by storyset