ReactJS - ภาพเคลื่อนไหว

ในบทนี้เราจะเรียนรู้วิธีการทำให้องค์ประกอบเคลื่อนไหวโดยใช้ปฏิกิริยา

ขั้นตอนที่ 1 - ติดตั้ง React CSS Transitions Group

นี่คือ React add-on ที่ใช้สำหรับสร้างการเปลี่ยน CSS และภาพเคลื่อนไหวขั้นพื้นฐาน เราจะติดตั้งจากไฟล์command prompt หน้าต่าง -

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

ขั้นตอนที่ 2 - เพิ่มไฟล์ CSS

มาสร้างไฟล์ style.css ใหม่

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css

เพื่อให้สามารถใช้งานได้ในแอปเราจำเป็นต้องเชื่อมโยงกับองค์ประกอบส่วนหัวใน index.html

<!DOCTYPE html>
<html lang = "en">
   <head>
      <link rel = "stylesheet" type = "text/css" href = "./style.css">
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

ขั้นตอนที่ 3 - ปรากฏภาพเคลื่อนไหว

เราจะสร้างส่วนประกอบ React พื้นฐาน ReactCSSTransitionGroupองค์ประกอบจะถูกใช้เป็นกระดาษห่อหุ้มของส่วนประกอบที่เราต้องการทำให้เคลื่อนไหว มันจะใช้transitionAppear และ transitionAppearTimeoutในขณะที่ transitionEnter และ transitionLeave เป็นเท็จ

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   render() {
      return (
         <div>
            <ReactCSSTransitionGroup transitionName = "example"
               transitionAppear = {true} transitionAppearTimeout = {500}
               transitionEnter = {false} transitionLeave = {false}>
					
               <h1>My Element...</h1>
            </ReactCSSTransitionGroup>
         </div>      
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

ภาพเคลื่อนไหว CSS นั้นง่ายมาก

css / style.css

.example-appear {
   opacity: 0.04;
}
.example-appear.example-appear-active {
   opacity: 2;
   transition: opacity 50s ease-in;
}

เมื่อเราเริ่มแอปองค์ประกอบจะจางหายไป

ขั้นตอนที่ 4 - เข้าและออกจากภาพเคลื่อนไหว

การเข้าและออกจากภาพเคลื่อนไหวสามารถใช้ได้เมื่อเราต้องการเพิ่มหรือลบองค์ประกอบออกจากรายการ

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
      }
      this.handleAdd = this.handleAdd.bind(this);
   };
   handleAdd() {
      var newItems = this.state.items.concat([prompt('Create New Item')]);
      this.setState({items: newItems});
   }
   handleRemove(i) {
      var newItems = this.state.items.slice();
      newItems.splice(i, 1);
      this.setState({items: newItems});
   }
   render() {
      var items = this.state.items.map(function(item, i) {
         return (
            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>
               {item}
            </div>
         );
      }.bind(this));
      
      return (
         <div>      
            <button onClick = {this.handleAdd}>Add Item</button>
				
            <ReactCSSTransitionGroup transitionName = "example" 
               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
               {items}
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

css / style.css

.example-enter {
   opacity: 0.04;
}
.example-enter.example-enter-active {
   opacity: 5;
   transition: opacity 50s ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.04;
   transition: opacity 50s ease-in;
}

เมื่อเราเริ่มแอพและคลิกที่ไฟล์ Add Item พรอมต์จะปรากฏขึ้น