Phản ứng chuyển tiếp CSS

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 dung chính Show

chỗ dựa xuất hiện
Nhập và Thoát
Nhóm chuyển tiếp phản ứng
Tôi có thể sử dụng hiệu ứng chuyển tiếp CSS trong React không?
Nhóm chuyển tiếp CSS là gì?

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ào

Trong 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ạn

Khi 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ình

Hã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ưới

Chú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ớm

Mở 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ế độ xem

Bạ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ơn

Hã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

import {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

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      Rajat

      Writes about React

      Loves Pizza

1, thay thế dòng

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      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ị

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      Rajat

      Writes about React

      Loves Pizza

4 sẽ kiểm tra giá trị boolean của

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      Rajat

      Writes about React

      Loves Pizza

2. Ngoài ra, thành phần sẽ có một giá trị

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      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

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      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ế độ xem

Vì vậy, hãy bọc

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      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

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
>
  
    
      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';

Sau đó, 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ôi

state = {
  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à

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

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ị

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

2 vào thành phần

state = {
  display: true,
};

0 như hình bên dưới

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

Sau đó, chuyển đến tệp

import {CSSTransition} from 'react-transition-group';

0 và thêm

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

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

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

9 và

.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 chuyển chỗ dựa

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

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óa

Tương tự, nếu bạn chuyển chỗ dựa

.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);
}

0 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 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 {
  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);
}

7 với giá trị ban đầu là

state = {
  display: true,
};

state = {
  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 {
  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

Sau đó, 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

Cuố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,
}

$ yarn add react-transition-group

thì đấ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 DOM

Hã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ã sau

Tô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

Đồ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 đây

Vớ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

Chú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

Cuố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 —

  in={this.state.display}
  timeout={350}
  classNames="display"
  unmountOnExit
  appear
>

$ yarn add react-transition-group

01,

.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);
}

0 và

$ 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ày

Tô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

Đ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 🍺

Tôi có thể sử dụng hiệu ứng chuyển tiếp CSS trong React không?

Ví dụ chuyển tiếp CSS. Chuyển đổi một thành phần React bằng CSS. Thành phần CSSTransition cho phép bạn áp dụng hiệu ứng chuyển tiếp cho các phần tử vào và rời khỏi DOM bằng CSS . Bạn có thể đạt được điều này bằng cách sử dụng các đạo cụ sau. trong , một giá trị Boolean được sử dụng để kiểm soát sự xuất hiện của phần tử.

Nhóm chuyển tiếp CSS là gì?

Reac Transition Group không phải là một thư viện hoạt ảnh như React-Motion, nó không tự tạo hiệu ứng cho các kiểu. Thay vào đó, nó hiển thị các giai đoạn chuyển tiếp, quản lý các lớp và nhóm thành phần, đồng thời thao tác với DOM theo những cách hữu ích, giúp việc triển khai các chuyển đổi hình ảnh thực tế dễ dàng hơn nhiều .

programming css

Phản ứng chuyển tiếp CSS

chỗ dựa xuất hiện

Nhập và Thoát

Nhóm chuyển tiếp phản ứng

Tôi có thể sử dụng hiệu ứng chuyển tiếp CSS trong React không?

Nhóm chuyển tiếp CSS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội