ReactJs Transition Group - Tạo Animation đầu tiên với ReactJs

Animation là một tính năng thú vị của ứng dụng web hiện đại. Nó mang lại cảm giác mới mẻ cho ứng dụng. React Community cung cấp nhiều thư viện animation dựa trên React Motion như React Motion, React Reveal, react-animations, v.v., bản thân React cũng cung cấp một thư viện animation, React Transition Group như một tùy chọn bổ sung trước đó. Nó là một thư viện độc lập nâng cao phiên bản trước của thư viện

React Transition Group là gì?

Thư viện React Transition Group là một triển khai đơn giản của hoạt ảnh. Nó không thực hiện bất kỳ hoạt ảnh nào ra khỏi hộp. Thay vào đó, nó tiết lộ thông tin liên quan đến hoạt ảnh cốt lõi. Mọi hoạt ảnh về cơ bản là sự chuyển đổi của một phần tử từ trạng thái này sang trạng thái khác. Thư viện hiển thị trạng thái tối thiểu có thể có của mọi phần tử và chúng được đưa ra bên dưới:

• Entering
• Entered
• Exiting
• Exited

Thư viện cung cấp các tùy chọn để đặt kiểu CSS cho từng trạng thái và tạo hoạt ảnh cho phần tử dựa trên kiểu khi phần tử chuyển từ trạng thái này sang trạng thái khác. Thư viện cung cấp các Props để thiết lập trạng thái hiện tại của phần tử. Nếu trong giá trị đạo cụ là true, thì điều đó có nghĩa là phần tử đang chuyển từ trạng thái nhập sang trạng thái thoát . Nếu trong giá trị đạo cụ là false, thì điều đó có nghĩa là phần tử đang chuyển từ đang thoát sang đã thoát.

ReactJs Transition

Transition là thành phần cơ bản được cung cấp bởi React Transition Group để tạo hoạt ảnh cho một phần tử. Hãy để chúng tôi tạo một ứng dụng đơn giản và cố gắng làm mờ dần / làm mờ một phần tử bằng cách sử dụng phần tử Transition .

Đầu tiên, tạo một ứng dụng phản ứng mới, ứng dụng phản ứng-hoạt hình bằng cách sử dụng Tạo ứng dụng phản ứng hoặc Trình gói cuộn lên bằng cách làm theo hướng dẫn trong chương Tạo ứng dụng React .

Tiếp theo, cài đặt thư viện React Transition Group .

cd /go/to/project 

npm install react-transition-group --save

Tiếp theo, mở ứng dụng trong trình chỉnh sửa yêu thích của bạn.

Tiếp theo, tạo thư mục src dưới thư mục gốc của ứng dụng.

Tiếp theo, tạo thư mục components trong thư mục src .

Tiếp theo, tạo một tệp HelloWorld.js trong thư mục src / components và bắt đầu chỉnh sửa.

Tiếp theo, nhập thư viện React và animation.

import React from 'react'; 

import { Transition } from 'react-transition-group'

Tiếp theo, tạo thành phần HelloWorld .

class HelloWorld extends React.Component {

   constructor(props) {

      super(props);

   }

}

Tiếp theo, xác định các kiểu liên quan đến chuyển đổi dưới dạng các đối tượng JavaScript trong hàm tạo.

this.duration = 2000;

this.defaultStyle = {

   transition: `opacity ${this.duration}ms ease-in-out`,

   opacity: 0,

}

this.transitionStyles = {

   entering: { opacity: 1 },

   entered: { opacity: 1 },

   exiting: { opacity: 0 },

   exited: { opacity: 0 },

};

Nơi đây,

• defaultStyles đặt hoạt ảnh chuyển tiếp
• chuyển đổi Kiểu tóc thiết lập phong cách cho các trạng thái khác nhau

Tiếp theo, thiết lập trạng thái ban đầu cho phần tử trong hàm tạo.

this.state = { 

   inProp: true 

}

Tiếp theo, mô phỏng hoạt ảnh bằng cách thay đổi các giá trị inProp 3 giây một lần.

setInterval(() => {

   this.setState((state, props) => {

      let newState = {

         inProp: !state.inProp

      };

      return newState;

   })

}, 3000);

Tiếp theo, tạo một chức năng kết xuất .

render() { 

   return ( 

   ); 

}

Tiếp theo, thêm thành phần Chuyển tiếp . Sử dụng this.state.inProp cho phần hỗ trợ trong và this.duration cho phần hỗ trợ thời gian chờ . Thành phần chuyển tiếp mong đợi một hàm, hàm này trả về giao diện người dùng. Về cơ bản nó là một đạo cụ Render .

render() {

   return (

      <Transition in={this.state.inProp} timeout={this.duration}>

         {state => ({

            ... component's user interface.

         })

      </Transition>

   );

}

Tiếp theo, viết giao diện người dùng các thành phần bên trong một vùng chứa và đặt defaultStyle và chuyển đổi Kiểu dáng cho vùng chứa.

render() {

   return (

      <Transition in={this.state.inProp} timeout={this.duration}>

         {state => (

            <div style={{

               ...this.defaultStyle,

               ...this.transitionStyles[state]

            }}>

               <h1>Hello World!</h1>

            </div>

         )}

      </Transition>

   );

}

Cuối cùng, expose component

export default HelloWorld





Mã nguồn hoàn chỉnh của thành phần như sau:

import React from "react";

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




class HelloWorld extends React.Component {

   constructor(props) {

      super(props);

      this.duration = 2000;

      this.defaultStyle = {

         transition: `opacity ${this.duration}ms ease-in-out`,

         opacity: 0,

      }

      this.transitionStyles = {

         entering: { opacity: 1 },

         entered: { opacity: 1 },

         exiting: { opacity: 0 },

         exited: { opacity: 0 },

      };

      this.state = {

         inProp: true

      }

      setInterval(() => {

         this.setState((state, props) => {

            let newState = {

               inProp: !state.inProp

            };

            return newState;

         })

      }, 3000);

   }

   render() {

      return (

         <Transition in={this.state.inProp} timeout={this.duration}>

            {state => (

               <div style={{

                  ...this.defaultStyle,

                  ...this.transitionStyles[state]

               }}>

                  <h1>Hello World!</h1>

               </div>

            )}

         </Transition>

      );

   }

}

export default HelloWorld;

Tiếp theo, tạo một tệp, index.js trong thư mục src và sử dụng thành phần HelloWorld .

import React from 'react';

import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld';

ReactDOM.render(

   <React.StrictMode   

      <HelloWorld /   

   </React.StrictMode   ,

   document.getElementById('root')

);

Cuối cùng, tạo một thư mục chung trong thư mục gốc và tạo tệp index.html .

<!DOCTYPE html>

<html lang="en">

   <head>

      <meta charset="utf-8">

      <title>React Containment App</title>

   </head>

   <body>

      <div id="root"></div>

      <script type="text/JavaScript" src="./index.js"></script>

   </body>

</html>

Tiếp theo, cung cấp ứng dụng bằng lệnh npm.

npm start

ReactJs TransitionGroup

TransitionGroup là một thành phần vùng chứa, quản lý nhiều thành phần chuyển tiếp trong một danh sách. Ví dụ: trong khi mỗi mục trong danh sách sử dụng CSSTransition, TransitionGroup có thể được sử dụng để nhóm tất cả các mục cho hoạt ảnh thích hợp.

<TransitionGroup>

   {items.map(({ id, text }) => (

      <CSSTransition key={id} timeout={500} classNames="item" >

         <Button

            onClick={() =>

               setItems(items =>

                  items.filter(item => item.id !== id)

               )

            }

            >

            &times;

         </Button>

         {text}

      </CSSTransition>

   ))}

</TransitionGroup>

Trên đây là thông tin và hướng dẫn code với Reactjs Transition Group. Cùng tìm hiểu thêm kiến thức về ReactJs qua khóa học lập trình ReactJs tại T3H. Nếu muốn học thêm các khóa học lập trình khác, đừng quên liên hệ với chúng tôi tại Viện Công nghệ thông tin T3H nhé!