Rate this post

Animation là một kỹ thuật trong đó hình ảnh được điều khiển để xuất hiện dưới dạng hình ảnh chuyển động. Đây là một trong những kỹ thuật được sử dụng nhiều nhất để tạo một ứng dụng web tương tác. Trong React, chúng ta có thể thêm animation bằng cách sử dụng một nhóm component rõ ràng được gọi là Nhóm chuyển tiếp React.

React Transition Group là một component bổ trợ để quản lý các trạng thái của component và hữu ích để xác định việc nhập và thoát các chuyển tiếp. Nó không thể tự tạo animation cho các kiểu. Thay vào đó, nó hiển thị các trạng thái chuyển tiếp, quản lý các lớp và nhóm phần tử cũng như thao tác DOM theo những cách hữu ích. Nó làm cho việc thực hiện các chuyển đổi hình ảnh dễ dàng hơn nhiều.

Tóm tắt nội dung

Tổng quan về Animation trong React

Animation trong React là quá trình tạo ra hiệu ứng chuyển động hoặc thay đổi trạng thái của các phần tử trong ứng dụng React. Nó giúp tạo ra giao diện người dùng sinh động, tương tác và hấp dẫn hơn.

React cung cấp một số cách để thực hiện Animation trong ứng dụng, bao gồm sử dụng CSS Transitions, CSS Animations và các thư viện hỗ trợ như React Transition Group, React Spring và Framer Motion.

CSS Transitions: React cho phép áp dụng CSS Transitions để tạo hiệu ứng chuyển đổi mượt mà khi các thuộc tính CSS thay đổi, chẳng hạn như màu sắc, kích thước hoặc vị trí.
CSS Animations: Bằng cách sử dụng CSS Animations, ta có thể định nghĩa các keyframes và áp dụng chúng cho các phần tử trong React. Điều này cho phép tạo ra các hiệu ứng chuyển động phức tạp và linh hoạt hơn.
React Transition Group: Đây là một thư viện hỗ trợ Animation trong React. Nó cung cấp các component như Transition, CSSTransition và TransitionGroup để quản lý và điều khiển các hiệu ứng chuyển động khi các phần tử được thêm, xóa hoặc thay đổi trạng thái trong ứng dụng.
React Spring: Là một thư viện hỗ trợ Animation phổ biến trong React. Nó cho phép tạo các hiệu ứng chuyển động phức tạp, linh hoạt và tương tác thông qua sự kết hợp giữa JavaScript và CSS.
Framer Motion: Là một thư viện mạnh mẽ để tạo Animation trong React. Nó cung cấp các thành phần và API linh hoạt để tạo ra các hiệu ứng chuyển động phong phú và tùy chỉnh.

Với các công cụ và thư viện này, Animation trong React trở nên dễ dàng và linh hoạt hơn bao giờ hết. Người phát triển có thể tạo ra các hiệu ứng chuyển động đẹp mắt và tùy chỉnh để nâng cao trải nghiệm người dùng trong ứng dụng React của mình.

Xem thêm Giới thiệu Animation trong Flutter

Các kỹ thuật Animation trong React

Trong React, có một số kỹ thuật Animation phổ biến mà bạn có thể sử dụng để tạo hiệu ứng chuyển động trong ứng dụng của mình. Dưới đây là một số kỹ thuật Animation quan trọng trong React:

CSS Transitions: Sử dụng CSS Transitions, bạn có thể tạo các hiệu ứng chuyển đổi mượt mà khi các thuộc tính CSS thay đổi. Bạn có thể sử dụng className và CSS để thay đổi thuộc tính CSS và thiết lập thời gian chuyển đổi.
CSS Animations: Kỹ thuật này cho phép bạn định nghĩa các keyframes và áp dụng chúng cho các phần tử trong React. Bằng cách sử dụng CSS Animations, bạn có thể tạo ra các hiệu ứng chuyển động phức tạp và linh hoạt.
React Transition Group: Thư viện React Transition Group cung cấp các thành phần như Transition, CSSTransition và TransitionGroup để quản lý và điều khiển các hiệu ứng chuyển động khi các phần tử được thêm, xóa hoặc thay đổi trạng thái trong ứng dụng.
React Spring: Đây là một thư viện mạnh mẽ hỗ trợ Animation trong React. React Spring sử dụng kỹ thuật spring physics để tạo ra các hiệu ứng chuyển động phức tạp, linh hoạt và tương tác.
Framer Motion: Framer Motion là một thư viện Animation mạnh mẽ cho React. Nó cung cấp các thành phần và API linh hoạt để tạo ra các hiệu ứng chuyển động đa dạng và tùy chỉnh.
React Native Animated: Nếu bạn đang làm việc với React Native, thì React Native Animated là một thư viện được tích hợp sẵn để tạo Animation cho ứng dụng di động. Nó cung cấp các API để tạo và điều khiển các hiệu ứng chuyển động trong môi trường mobile.

Các kỹ thuật Animation này cung cấp các phương pháp và công cụ để tạo hiệu ứng chuyển động mạnh mẽ trong ứng dụng React của bạn. Hãy chọn kỹ thuật phù hợp với yêu cầu của dự án và sự linh hoạt mà bạn muốn đạt được.

Xem thêm Animations trong Angular

Cài đặt Animation trong React

Chúng ta cần cài đặt react-transition-group để tạo animation trong ứng dụng Web React. Bạn có thể sử dụng lệnh dưới đây.

$ npm install react-transition-group --save

Transition Group Components trong React

API React Transition Group cung cấp ba component chính. Đó là:

Transition
CSSTransition
Transition Group

Transition

Nó có một API component đơn giản để mô tả sự chuyển đổi từ trạng thái component này sang trạng thái component khác theo thời gian. Nó chủ yếu được sử dụng để tạo animation cho việc gắn và tháo một component. Nó cũng có thể được sử dụng cho các trạng thái chuyển tiếp tại chỗ.

Chúng ta có thể truy cập component Chuyển đổi thành bốn trạng thái:

entering
entered
exiting
exited

CSSTransition

component CSSTransition sử dụng các lớp biểu định kiểu CSS để viết quá trình chuyển đổi và tạo animation. Nó được lấy cảm hứng từ thư viện ng-animate. Nó cũng có thể kế thừa tất cả các đạo cụ của component chuyển tiếp. Chúng ta có thể chia “CSSTransition” thành ba trạng thái. Đó là:

Appear
Enter
Exit

component CSSTransition phải được áp dụng trong một cặp tên lớp cho các component con. Lớp đầu tiên ở dạng tên-giai đoạn và lớp thứ hai ở dạng tên-giai đoạn đang hoạt động. Ví dụ: bạn cung cấp tên fade và khi nó áp dụng cho giai đoạn ‘enter’, hai lớp sẽ là fade-enter và fade-enter-active. Nó cũng có thể lấy một chỗ dựa là Thời gian chờ xác định thời gian tối đa để tạo animation.

TransitionGroup

component này được sử dụng để quản lý một tập hợp các component chuyển tiếp (Transition và CSSTransition) trong một danh sách. Nó là một cỗ máy trạng thái kiểm soát việc lắp và tháo các bộ phận theo thời gian. component Chuyển đổi không xác định trực tiếp bất kỳ animation nào. Ở đây, cách animation của mục ‘danh sách’ dựa trên component chuyển tiếp riêng lẻ. Nó có nghĩa là, component “TransitionGroup” có thể có các animation khác nhau trong một component.

Xem thêm Animation trong CSS

Chúng ta hãy xem ví dụ dưới đây, rõ ràng giúp hiểu rõ về React Animation.

Ví dụ

App.js

Trong tệp App.js, hãy nhập component nhóm phản ứng-chuyển tiếp và tạo component CSSTransition sử dụng như một trình bao bọc của component bạn muốn tạo animation. Chúng ta sẽ sử dụng transferEnterTimeout và chuyển đổiLeaveTimeout cho CSS Transition. animation Enter và Rời được sử dụng khi chúng ta muốn chèn hoặc xóa các phần tử khỏi danh sách.

import React, { Component } from 'react';  
import { CSSTransitionGroup } from 'react-transition-group';  
  
class App extends React.Component {  
    constructor(props) {  
    super(props);  
    this.state = {items: ['Blockchain', 'ReactJS', 'TypeScript', 'JavaTpoint']};  
    this.handleAdd = this.handleAdd.bind(this);  
  }  
  
  handleAdd() {  
    const newItems = this.state.items.concat([  
      prompt('Enter Item Name')  
    ]);  
    this.setState({items: newItems});  
  }  
  
  handleRemove(i) {  
    let newItems = this.state.items.slice();  
    newItems.splice(i, 1);  
    this.setState({items: newItems});  
  }  
  
  render() {  
    const items = this.state.items.map((item, i) => (  
      <div key={item} onClick={() => this.handleRemove(i)}>  
        {item}  
      </div>  
    ));  
  
    return (  
      <div>  
    <h1>Animation Example</h1>  
            <button onClick={this.handleAdd}>Insert Item</button>  
            <CSSTransitionGroup  
               transitionName="example"  
           transitionEnterTimeout={800}  
               transitionLeaveTimeout={600}>  
               {items}  
            </CSSTransitionGroup>  
      </div>  
    );  
  }  
}  
export default App;

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App />, document.getElementById('app'));

style.css

Thêm tệp style.css vào ứng dụng của bạn và thêm các kiểu CSS sau. Bây giờ, để sử dụng tệp CSS này, bạn cần thêm liên kết của tệp này vào tệp HTML của mình.

.example-enter {  
  opacity: 0.01;  
}  
  
.example-enter.example-enter-active {  
  opacity: 1;  
  transition: opacity 500ms ease-in;  
}  
  
.example-leave {  
  opacity: 1;  
}  
  
.example-leave.example-leave-active {  
  opacity: 0.01;  
  transition: opacity 300ms ease-in;  
}

Trong ví dụ trên, thời lượng animation được chỉ định trong cả CSS và phương thức kết xuất. Nó cho component React biết khi nào thì xóa các lớp animation khỏi danh sách và nếu nó rời khỏi thì khi nào thì xóa phần tử khỏi DOM.

Xem thêm CSS Transform và Transitions

Khi chúng ta thực hiện chương trình trên, nó sẽ đưa ra kết quả bên dưới.

Nhấp vào nút ‘Chèn mục’, màn hình sau xuất hiện.

Sau khi chúng tôi chèn mục và nhấn Ok, mục mới có thể được thêm vào danh sách với phong cách mờ dần. Tại đây, chúng tôi cũng có thể xóa bất kỳ mục nào khỏi danh sách bằng cách nhấp vào liên kết cụ thể.

Xem thêm Animations & Motion trong website là gì ?

ReactJS

Animation trong React