Tutorial di base ReactJS

动画ReactJS

In questa sezione, impareremo come animare gli elementi con React.

Passo 1 - Installa il gruppo React CSS Transitions

Questo è un plugin React per creare transizioni CSS base e animazioni. Partiremo daprompt dei comandiInstallazione da parte della finestra -

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

Passo 2 - Aggiungi il file CSS

Creiamo un nuovo file style.css.

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

Per poterlo utilizzare nell'applicazione, dobbiamo linkarlo all'elemento head di 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>

Passo 3 - Mostra l'animazione

creeremo un React base componente. L'elemento Reactcsstransitionggroup sarà usato come wrapper per il componente che vogliamo animare. Utilizzerà transitionAppear e transitionappmentmeout, mentre transitionEnter e transitionLeave sono false.

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>Mio Elemento...</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'));

Le animazioni CSS sono molto semplici.

css / style.css

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

Una volta avviato l'applicazione, l'elemento si dissolve gradualmente.

Passaggio 4 - Animazioni di input e output

Quando vogliamo aggiungere o rimuovere elementi da una lista, possiamo utilizzare animazioni di input e output.

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: ['Oggetto 1...', 'Oggetto 2...', 'Oggetto 3...', 'Oggetto 4...']
　　　　　　}
　　　　　　this.handleAdd = this.handleAdd.bind(this);
　　　};
　　　handleAdd() {
　　　　　　var newItems = this.state.items.concat([prompt('Crea Nuovo Oggetto')]);
　　　　　　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}>Aggiungi Oggetto</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;
}

Quando avviamo l'applicazione e clicchiamoAggiungi elementoQuando si preme il pulsante, apparirà un suggerimento.

Inserisci il nome e premi OK per far apparire il nuovo elemento.

Ora, possiamo eliminare alcuni elementi (Item 3...) Clicca su di esso. Questo progetto si sfumerà dalla lista.

高阶组件ReactJS 使用通量ReactJS