Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Giới thiệu Hiệu ứng Động trong React

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hai hướng dẫn React gần đây, bạn đã quen với các khái niệm React cơ bản như JSX, định tuyếnform. Trong hướng dẫn này, chúng ta sẽ nâng chúng lên một mức độ cao hơn và cố gắng nắm rõ hiệu ứng động trong React.

Bắt đầu

Tạo một thư mục gọi là ReactAnimations. Điều hướng đến thư mục và khởi tạo dự án bằng cách sử dụng Node Package Manager hoặc npm.

Cài đặt reactreact-dom vào dự án.

Chúng ta sẽ sử dụng gói mô-đun webpack cho dự án này. Cài đặt webpack và webpack-dev-server.

Cài đặt gói babel để chuyển đổi cú pháp JSX sang JavaScript trong dự án của chúng ta.

Tạo một tập tin cấu hình theo yêu cầu của webpack-dev-server, nơi chúng ta sẽ xác định tập tin đầu vào, đầu ra và babel loader. Tập tin webpack.config.js sẽ như sau:

Tạo một tập tin index.html nơi ứng dụng sẽ được kết xuất. Nó sẽ giống như sau:

Tạo một tập tin có tên là app.js. Bên trong app.js import các thư viện react theo yêu cầu như sau:

Tạo một thành phần phi trạng thái được gọi là Home để kết xuất thẻ H1.

Kết xuất thành phần Home bên trong phần tử app trong trang index.html. app.js trông giống như sau:

Lưu các thay đổi ở trên và khởi động máy chủ webpack. Bạn sẽ thấy ứng dụng của bạn tại http://localhost:8080/index.html.

Hiệu ứng Động trong React

React cung cấp một số tiện ích bổ sung để tạo các ứng dụng React. TransitionGroupCSSTransitionGroup là các API cung cấp hiệu ứng động.

Theo tài liệu chính thức,

Thành phần bổ sung ReactTransitionGroup là một API cấp độ thấp cho hiệu ứng động, và ReactCSSTransitionGroup là một thành phần bổ sung để dễ dàng cài đặt các hiệu ứng động và chuyển tiếp bằng CSS cơ bản.

Hiệu ứng Xuất hiện

Hãy bắt đầu bằng cách thử một hiệu ứng động đơn giản trong React. Cài đặt react-addons-css-transition-group vào dự án.

Import ReactCSSTransitionGroup bên trong tập tin app.js.

Bên trong thành phần Home mà bạn đã tạo, gói thẻ h2 bên trong thẻ ReactCSSTransitionGroup.

Bằng cách sử dụng thẻ ReactCSSTransitionGroup, bạn đã xác định phần nơi mà hiệu ứng động sẽ diễn ra. Bạn đã chỉ định tên cho hiệu ứng chuyển tiếp bằng cách sử dụng transitionName. Bạn cũng đã xác định hiệu ứng chuyển tiếp xuất hiện, đi vào và đi ra có xảy ra hay không.

Sử dụng tên hiệu ứng chuyển tiếp được xác định bên trong ReactCSSTransitionGroup, bạn sẽ xác định được các lớp CSS sẽ được thực thi khi xuất hiện và khi ở trạng thái active. Thêm phong cách CSS sau vào trang index.html.

Như bạn có thể thấy, bạn cần chỉ định khoảng thời gian cho hiệu ứng động cả trong phương thức kết xuất và trong CSS. Bởi vì React biết khi nào xóa các lớp hiệu ứng khỏi phần tử và khi nào cần xoá phần tử khỏi DOM.

Lưu các thay đổi ở trên và làm mới trang. Khi trang đã được tải, trong vòng vài giây bạn sẽ có thể thấy văn bản với hiệu ứng động.

Hiệu ứng Đi vào/Đi ra

Để hiểu rõ hơn về hiệu ứng đi vào và đi ra, chúng ta sẽ tạo một ứng dụng React nhỏ. Ứng dụng sẽ có một hộp nhập văn bản để nhập tên. Bạn sẽ thấy cách để thêm các hiệu ứng động đi vào khi một cái tên được thêm vào danh sách.

Bên trong app.js, tạo một lớp mới gọi là App.

Khởi tạo một danh sách data và một biến name bên trong state khởi tạo của thành phần.

Bên trong phần render của thành phần App, đặt một hộp input văn bản để nhập tên và một nút để thêm tên vào array list.

Xác định sự kiện handleChange của input và sự kiện add bên trong thành phần App.

Sự kiện handleChange thiết lập giá trị của hộp input văn bản cho biến name. Sau đây là phương thức add:

Bên trong phương thức add, tên được nhập và một ID duy nhất được đẩy vào array list data.

Liên kết phương thức handleChangeadd trong constructor của thành phần App.

Bạn sẽ thấy các tên được nhập vào bên trong một danh sách. Sửa đổi code render HTML để thêm danh sách.

Để tạo hiệu ứng động cho các phần tử mới được thêm vào, chúng ta sẽ thêm thẻ ReactCSSTransitionGroup trên các phần tử li.

Thêm phong cách chuyển tiếp bằng CSS sau vào trang index.html.

Đây là thành phần App hoàn chỉnh:

Lưu ở trên và làm mới lại trang. Nhập tên và bấm nút add, và phần tử sẽ được thêm vào danh sách với hiệu ứng động.

Tương tự, hiệu ứng đi ra cũng có thể được thực hiện trong đoạn code trên. Một khi chức năng xóa đã được cài đặt trong ứng dụng, hãy thêm lớp leaveleave-active vào index.html. Thiết lập TransitionLeave thành True trong thẻ ReactCSSTransitionGroup trong phương thức render, và như vậy bạn đã cài đặt xong hiệu ứng động.

Phần Tóm tắt

Trong bài này, bạn đã được làm quen với việc sử dụng hiệu ứng động trong React. Bạn đã tạo một ứng dụng React đơn giản và học được cách làm thế nào để cài đặt hiệu ứng xuất hiện và đi vào. Để tìm hiểu sâu hơn về hiệu ứng động trong React, tôi khuyên bạn nên đọc tài liệu hướng dẫn chính thức.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Trong hai năm qua, React đã trở nên phổ biến. Trên thực tế, chúng tôi có một số sản phẩm trên market để bạn có thể mua về, đánh giá, cài đặt, vân vân. Nếu bạn đang tìm kiếm các nguồn tài nguyên bổ sung xung quanh React, đừng ngại tham khảo chúng.

Hãy cho chúng tôi biết những suy nghĩ của bạn trong phần bình luận ​​dưới đây. Hãy ghe qua trang hướng dẫn Envato Tuts+ để có thêm các hướng dẫn về React và các công nghệ web có liên quan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.