ReactJS Grundtutorials

ReactJS-Hochkomponenten ReactJS-Flussnutzung

ReactJS-Animation

In diesem Kapitel werden wir lernen, wie man mit React Elemente animiert.

Abschnitt1Schritt-Installieren Sie das React CSS Transitions-Gruppenset

Dies ist das React-Plugin, um grundlegende CSS-Übergänge und Animationen zu erstellen. Wir werden vonBefehlszeileFenster installieren-

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

Abschnitt2Schritt-Fügen Sie die CSS-Datei hinzu

Lassen Sie uns eine neue Datei style.css erstellen.

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

Um es in der Anwendung verwenden zu können, müssen wir es an den head-Element in index.html verknüpfen.

!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>

Abschnitt3Schritt-Animationsanzeige

Wir erstellen ein grundlegendes React Komponente. Das Reactcsstransitionggroup-Element wird als Wrapper für die Komponenten verwendet, die animiert werden sollen. Es wird transitionAppear und transitionappmentmeout, während transitionEnter und transitionLeave auf false gesetzt sind.

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-Animationen sind sehr einfach.

css / style.css

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

Sobald das Programm gestartet wird, wird das Element langsam hinzugefügt.

Schritte4-Eingangs- und Ausgangsanimationen

Wenn wir Elemente aus der Liste hinzufügen oder löschen möchten, können wir Eingangs- und Ausgangsanimationen verwenden.

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}>Item hinzufügen</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;
}

Wenn wir die Anwendung starten und aufItem hinzufügenWird ein Button gedrückt, erscheint ein Hinweis.

Geben Sie den Namen ein und drücken Sie OK, dann wird das neue Element eingefügt.

Nun können wir einige Elemente löschen (Item 3...)Klicken Sie darauf. Dieses Projekt wird aus der Liste ausgeblendet.

ReactJS-Hochkomponenten ReactJS-Flussnutzung