Dữ liệu có vị trí quan trọng riêng trong các ứng dụng. Không có dữ liệu, các ứng dụng của chúng tôi sẽ trống rỗng theo đúng nghĩa đen. Nhưng điều quan trọng là phải biết cách thức, thời điểm và vị trí trình bày dữ liệu này trong ứng dụng
Nói về việc làm cho mọi thứ xuất hiện, có hai cách mà chúng ta có thể sử dụng để làm điều này. Một trong số đó là khi chúng ta làm cho trạng thái của ứng dụng nhảy từ giá trị này sang giá trị khác. Điều này thật tuyệt trong một số trường hợp, nhưng nếu chúng ta thực hiện thay đổi trạng thái này mượt mà hơn một chút thì sao?
Điều này thường được thực hiện bằng cách viết một số mã CSS, nhưng có một cách khác, và theo ý kiến của tôi, một cách tốt hơn để triển khai các hiệu ứng chuyển đổi trong ứng dụng React của chúng ta… bằng cách sử dụng thư viện React Transition Group
Thư viện này sẽ cho phép chúng tôi chuyển đổi các thành phần React vào và ra khỏi DOM, tùy thuộc vào trạng thái mà thành phần đó được gắn với. Bạn sẽ có thể viết các phần tử chuyển tiếp của mình một cách gọn gàng và có tính khai báo mà không cần phải viết bất kỳ thuộc tính CSS
$ yarn add react-transition-group
7 nào hoặc bất kỳ hàm $ yarn add react-transition-group
8 khó hiểu nàoTrong bài đăng này, bạn sẽ thấy cách sử dụng thư viện
$ yarn add react-transition-group
9 để thực hiện chuyển tiếp mượt mà hơn. Cuối cùng, bạn sẽ có thể sử dụng thư viện tuyệt vời này để mang lại nhiều điều tuyệt vời cho các Thành phần React của bạnKhi xây dựng với các thành phần React, hãy sử dụng các công cụ như Bit để lưu trữ, chia sẻ các thành phần và làm cho chúng có thể tái sử dụng ở mọi nơi. https. //chút. nhà phát triển
Bắt đầu
Hãy bắt đầu bằng cách tạo một thư mục Ứng dụng React mới. Đảm bảo rằng bạn có phiên bản Node mới nhất trên hệ thống của mình. Điều này sẽ cho phép chúng tôi sử dụng NPX để tạo Ứng dụng React ngay cả khi chúng tôi chưa cài đặt
$ yarn add classnames
0 CLI trên hệ thống. Vì vậy, đi đến thiết bị đầu cuối lệnh và gõ$ npx create-react-app my-app
Lệnh này sẽ tạo một thư mục có tên
$ yarn add classnames
1 chứa tất cả những thứ chúng ta cần để bắt đầu với Ứng dụng React của mình. Nếu bạn chạy tập lệnh $ yarn add classnames
2 bằng cách sử dụng $ yarn add classnames
3 hoặc $ yarn add classnames
4, bạn sẽ nhận được nội dung như thế này trong trình duyệt của mìnhHãy tiếp tục và cài đặt thư viện
$ yarn add classnames
5 làm phụ thuộc cho dự án này$ yarn add react-transition-group
Hãy cũng cài đặt thư viện
$ yarn add classnames
6. Thư viện này sẽ giúp chúng ta nối các tên lớp với nhau một cách có điều kiện với các thành phần của chúng ta$ yarn add classnames
Sử dụng Thành phần CSSTransition
Hãy bắt đầu bằng cách tạo một nút đơn giản sẽ hiển thị nội dung nào đó khi người dùng nhấp vào nút đó
Bên trong thư mục
$ yarn add classnames
8 của $ yarn add classnames
1, hãy mở tệp $ yarn add classnames
9 và thay thế mã bên trong bằng mã được hiển thị bên dướiChúng tôi cũng sẽ cần làm việc một chút với CSS của mình, nhưng tôi không muốn làm cho bài đăng này dài một cách không cần thiết, vì vậy chỉ cần truy cập vào đây và sao chép mã vào tệp
import {CSSTransition} from 'react-transition-group';
0 trong thư mục $ yarn add classnames
8 của bạn. Đừng lo lắng, chúng tôi sẽ xem xét nó sớmMở trình duyệt của bạn và bạn sẽ nhận được một cái gì đó như thế này
Khi người dùng nhấp vào nút,
import {CSSTransition} from 'react-transition-group';
2 sẽ kích hoạt phương thức import {CSSTransition} from 'react-transition-group';
3, thay đổi trạng thái của ứng dụng. Dựa trên trạng thái này, danh sách được hiển thị hoặc ẩn khỏi chế độ xemBạn có thể thấy rằng danh sách đột nhiên xuất hiện và biến mất khỏi màn hình. Điều gì sẽ xảy ra nếu bạn muốn nó làm cho thay đổi này mượt mà hơn một chút?
React Transition Group chứa ba thành phần chính
- chuyển tiếp
- Chuyển đổi CSS
- Nhóm chuyển tiếp
Các thành phần
import {CSSTransition} from 'react-transition-group';
4 và import {CSSTransition} from 'react-transition-group';
5 có thể được sử dụng để xử lý quá trình chuyển đổi của các thành phần đơn lẻ. Hãy bắt đầu bằng cách xem cách chúng ta có thể sử dụng thành phần import {CSSTransition} from 'react-transition-group';
5 để làm cho nút ở trên và chức năng của nó mượt mà hơnHãy bắt đầu bằng cách nhập thành phần
import {CSSTransition} from 'react-transition-group';
5 từ thư viện $ yarn add classnames
5 vào tệp $ yarn add classnames
9import {CSSTransition} from 'react-transition-group';
import {CSSTransition} from 'react-transition-group';
5 cho phép chúng tôi áp dụng chuyển đổi CSS cho các phần tử DOM. Trong phương pháp
- Rajat
- Writes about React
- Loves Pizza
1, thay thế dòng
- Rajat
- Writes about React
- Loves Pizza
2 bằng thành phần import {CSSTransition} from 'react-transition-group';
5. Thành phần này sẽ có một giá trị
- Rajat
- Writes about React
- Loves Pizza
4 sẽ kiểm tra giá trị boolean của
- Rajat
- Writes about React
- Loves Pizza
2. Ngoài ra, thành phần sẽ có một giá trị
- Rajat
- Writes about React
- Loves Pizza
6 sẽ mô tả lượng mili giây cần thiết để thành phần vào hoặc rời khỏi DOM. Chúng tôi cũng sẽ cần chuyển một giá trị $ yarn add classnames
6 sẽ có một chuỗi làm giá trị của nó và sẽ cho thành phần của chúng tôi biết thuộc tính CSS nào sẽ áp dụng cho quá trình chuyển đổi của thành phần. Prop
- Rajat
- Writes about React
- Loves Pizza
8 được sử dụng để xóa hoàn toàn thứ gì đó khỏi DOM, thay vì chỉ ẩn nó khỏi chế độ xemVì vậy, hãy bọc
- Rajat
- Writes about React
- Loves Pizza
9 và mọi thứ bên trong nó trong state = {
display: true,
};
0 như hình bên dưới
- Rajat
- Writes about React
- Loves Pizza
Bây giờ chúng ta hãy xem những gì chúng ta có trong trình duyệt của mình
Làm sao chuyện này lại xảy ra? . Hãy cùng xem mã CSS bên trong tệp
import {CSSTransition} from 'react-transition-group';
0 để biết thêmĐầu tiên, chúng tôi có danh sách các biến được xác định, kiểm soát màu sắc và số đo của nút và danh sách. Chúng tôi cũng có giá trị thời gian chờ được đặt thành 350 mili giây, giống như giá trị của giá trị thời gian chờ bên trong thành phần
import {CSSTransition} from 'react-transition-group';
5Sau đó, chúng tôi đã đặt kiểu cho nút và danh sách sẽ được hiển thị. Không có gì đặc biệt ở đây, chúng tôi làm điều này mọi lúc
Sau đó, chúng ta có mã kiểu điều khiển quá trình chuyển đổi. Đây là lúc thành phần
import {CSSTransition} from 'react-transition-group';
5 phát huy tác dụng. Thành phần cung cấp cho chúng tôi bốn tên lớp để sử dụng để kiểm soát việc vào và ra của một phần tử khỏi DOM. Những tên lớp này là- hiển thị-nhập
- hiển thị-nhập-hoạt động
- hiển thị-thoát
- hiển thị-thoát-hoạt động
state = {
display: true,
};
5 sẽ được kích hoạt ngay lập tức khi phần tử vào DOM. state = {
display: true,
};
6 sẽ được áp dụng sau khi thực hiện xong state = {
display: true,
};
5. Đây là nơi chúng tôi thêm quá trình chuyển đổi của chúng tôistate = {
display: true,
};
8 sẽ kích hoạt khi trạng thái hiển thị chuyển sang state = {
display: true,
};
9, tiếp theo là 0, sau đó phần tử danh sách sẽ rời khỏi DOM
chỗ dựa xuất hiện
Hiện tại app không hiện danh sách khi mới load app lên trình duyệt. Người dùng phải bấm vào nút để làm cho danh sách xuất hiện trên màn hình
Nếu bạn muốn hiển thị danh sách ban đầu khi tải trang thì sao?
state = {
display: true,
};
Nhưng bây giờ khi chúng tôi xem trang trong trình duyệt, bạn sẽ thấy rằng danh sách và nút chỉ ở đó. Làm mới trang và bạn sẽ nhận thấy rằng danh sách xuất hiện ngay lập tức mà không có bất kỳ chuyển đổi nào
Bạn có thể thực hiện quá trình chuyển đổi ban đầu bằng cách thêm giá trị
2 vào thành phần
state = {
display: true,
};
0 như hình bên dướiSau đó, chuyển đến tệp
import {CSSTransition} from 'react-transition-group';
0 và thêm 5 vào _______48_______6 và _______48_______7 vào _______48_______8 như hình bên dưới
.display-enter, .display-appear {
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
Nếu bạn làm mới trình duyệt, bạn sẽ thấy quá trình chuyển đổi ban đầu như thế này
Nhập và Thoát
Để vô hiệu hóa một quá trình chuyển đổi cụ thể, chúng ta có thể sử dụng các props
9 và
.display-enter, .display-appear {0
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
Nếu bạn chuyển chỗ dựa
9 cho chỗ dựa
import {CSSTransition} from 'react-transition-group';
5 với giá trị là state = {
display: true,
};
9, thì quá trình chuyển đổi lối vào sẽ bị vô hiệu hóaTương tự, nếu bạn chuyển chỗ dựa
.display-enter, .display-appear {0 cho chỗ dựa
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
import {CSSTransition} from 'react-transition-group';
5 với giá trị là state = {
display: true,
};
9, thì quá trình chuyển đổi thoát sẽ bị vô hiệu hóaĐạo cụ vòng đời
Có sáu đạo cụ vòng đời trong React Transition Group. họ đang
- vào nhập
- Khi nhập
- onĐã nhập
- onExit
- onExiting
- onExited
Chúng ta có thể sử dụng các đạo cụ vòng đời này để nhắm mục tiêu thời gian cụ thể trong quá trình chuyển đổi của phần tử. Tên của các props này cho thấy khá rõ thời gian trong quá trình chuyển đổi có thể được truy cập bởi prop cụ thể đó. Hãy xem cách chúng ta có thể sử dụng chúng trong mã của mình
Hãy bắt đầu bằng cách tạo một giá trị trạng thái mới có tên là
.display-enter, .display-appear {7 với giá trị ban đầu là
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
state = {
display: true,
};
9state = {
display: false,
hightlight: false,
}
Sau đó, tạo một phương thức mới mà chúng ta có thể sử dụng để chuyển đổi giá trị của
.display-enter, .display-appear {7
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
toggleHighlight = [] => {
this.setState[state => [{
hightlight: !state.highlight,
}]];
};
Hãy truyền phương thức này cho prop
state = {
display: false,
hightlight: false,
}
0 và state = {
display: false,
hightlight: false,
}
1 của thành phần import {CSSTransition} from 'react-transition-group';
5 như hình bên dưới$ yarn add react-transition-group
0Sau đó, chúng tôi sẽ thêm một
state = {
display: false,
hightlight: false,
}
3 được gắn với trạng thái này vào bất kỳ mục nào trong danh sách như được hiển thị bên dưới$ yarn add react-transition-group
1Cuối cùng, chuyển đến tệp
import {CSSTransition} from 'react-transition-group';
0 và thêm một số kiểu mà bạn muốn áp dụng cho mục danh sách khi trạng thái đánh dấu được đặt thành state = {
display: false,
hightlight: false,
}
5$ yarn add react-transition-group
2thì đấy. Bây giờ khi bạn làm cho danh sách xuất hiện, một trong các mục trong danh sách sẽ được đánh dấu. Điểm nổi bật sẽ biến mất khi bạn làm cho danh sách biến mất
Thành phần TransitionGroup
Cho đến bây giờ, chúng tôi đã sử dụng thành phần
import {CSSTransition} from 'react-transition-group';
5 để áp dụng các hiệu ứng chuyển tiếp cho một phần tử. Nhưng nếu tôi muốn thêm hiệu ứng chuyển tiếp vào nhiều yếu tố thì sao? . Rất may, $ yarn add react-transition-group
9 cũng đi kèm với thành phần state = {
display: false,
hightlight: false,
}
8. Chúng ta hãy xem cách sử dụng thành phần này để chuyển đổi các mục trong danh sách các phần tử vào và ra khỏi DOMHãy bắt đầu với một cái gì đó khác biệt. Tôi yêu thích truyện tranh, vì vậy bây giờ tôi sẽ tạo một danh sách các nhân vật truyện tranh DC và sau đó tôi sẽ chọn nhân vật nào trong số họ mà tôi yêu thích
Để thực hiện điều này, hãy bắt đầu lại từ đầu. Xóa mọi thứ khỏi tệp
$ yarn add classnames
9 và thay vào đó hãy viết đoạn mã sauTôi sẽ không lãng phí thời gian và không gian để giải thích mã này. Nói tóm lại, người dùng có thể nhấp vào mục danh sách ở bên trái để coi đó là mục yêu thích và hiển thị mục đó ở bên phải dưới mục yêu thích. Nếu bạn nhấp lại vào mục đó, mục đó sẽ bị xóa khỏi danh sách yêu thích
Tôi cũng đang sử dụng thư viện UUID để cung cấp cho mỗi mục trong danh sách một id duy nhất
$ yarn add react-transition-group
3Đồng thời thay thế mã kiểu dáng trong
import {CSSTransition} from 'react-transition-group';
0 bằng mã được cung cấp tại đâyVới thiết lập ban đầu của chúng tôi đã sẵn sàng, hãy bắt đầu và thêm một số chuyển đổi vào ứng dụng React này. Như bạn có thể thấy, các mục được thêm và xóa ngay lập tức khỏi phần yêu thích. Hãy sử dụng các thành phần
import {CSSTransition} from 'react-transition-group';
5 và state = {
display: false,
hightlight: false,
}
8 để thêm hiệu ứng chuyển tiếp cho từng mục để chúng có thể xuất hiện và biến mất một cách mượt mà. Bắt đầu bằng cách nhập thành phần ở đầu tệp$ yarn add react-transition-group
4Chúng tôi sẽ sử dụng
import {CSSTransition} from 'react-transition-group';
5 trên mỗi mục sẽ được đặt trong mục yêu thích và thành phần state = {
display: false,
hightlight: false,
}
8 sẽ được sử dụng làm trình bao bọc các chuyển đổi CSS riêng lẻ. Bên trong hàm toggleHighlight = [] => {
this.setState[state => [{
hightlight: !state.highlight,
}]];
};
5 được sử dụng trên toggleHighlight = [] => {
this.setState[state => [{
hightlight: !state.highlight,
}]];
};
6, thêm thành phần import {CSSTransition} from 'react-transition-group';
5 và bọc toàn bộ nội dung trong state = {
display: false,
hightlight: false,
}
8 như hình bên dưới$ yarn add react-transition-group
5Cuối cùng, chúng ta cần thêm các thuộc tính kiểu chuyển tiếp trong tệp
import {CSSTransition} from 'react-transition-group';
0. Giống như trước đây, chúng ta cần xác định bốn bộ chuyển đổi — 9,
$ yarn add react-transition-group
01, .display-enter, .display-appear {0 và
top: var[--menu-starting-top];
width: var[--toggler-width];
max-height: var[--toggler-height];
color: var[--fade-from-color];
background-color: var[--toggler-bg-color];
}.display-enter-active, .display-appear-active {
top: var[--menu-ending-top];
width: var[--menu-width];
max-height: var[--menu-max-height];
color: var[--fade-to-color];
background-color: var[--menu-bg-color];
transition: all var[--timeout];
}
$ yarn add react-transition-group
03. Vì import {CSSTransition} from 'react-transition-group';
5 có prop $ yarn add classnames
6 được đặt thành $ yarn add react-transition-group
06, nên bốn bộ thuộc tính kiểu này sẽ trông giống như thế nàyTôi đã đặt giá trị thời gian chờ thành 1 giây để làm cho quá trình chuyển đổi trở nên rất đáng chú ý
Thành phần
state = {
display: false,
hightlight: false,
}
8 sử dụng phần tử $ yarn add react-transition-group
08 làm phần tử vùng chứa của nó. Chúng ta có thể thay đổi nó thành bất kỳ phần tử HTML nào khác bằng cách chuyển một giá trị $ yarn add react-transition-group
09 cho thành phần đó. Chúng tôi có thể đặt chỗ dựa này thành bất kỳ phần tử HTML nào chúng tôi muốn và thậm chí chúng tôi có thể đặt nó thành null như thế này$ yarn add react-transition-group
6Điều này có thể hữu ích khi bạn muốn cấu trúc DOM theo một cách nhất định
Phần kết luận
Bài đăng này chỉ cung cấp cho bạn một hương vị nhỏ về những gì React Transition Group có thể làm. Chúng tôi chưa thấy cách sử dụng Thành phần
import {CSSTransition} from 'react-transition-group';
4 của thư viện này. Ngoài ra, có thể sử dụng thư viện này để chuyển đổi sang điều hướng giữa các trang khác nhau không? Tôi hy vọng bài đăng này đã giúp bạn hiểu cách sử dụng Thư viện nhóm chuyển tiếp React để triển khai các chuyển đổi mượt mà và tuyệt vời trong Ứng dụng React của bạn. Để tìm hiểu thêm về cách sử dụng thư viện này, hãy xem tài liệu chính thức của nó. Chúng hơi ngắn, nhưng chúng có ý nghĩa và đã giúp tôi rất nhiều khi tôi mới bắt đầu viết bài này
Nhóm chuyển tiếp phản ứng
cộng đồng phản ứng. tổ chức
Xin vui lòng bình luận ở đây hoặc đánh tôi trên Twitter nếu bạn có bất kỳ suy nghĩ nào để chia sẻ với tôi. Chúc mừng 🍺