Introduzione alle animazioni in React

Nell'ultimo paio di tutorial React, hai acquisito familiarità con i concetti di base di React come JSX, routing e moduli. In questo tutorial, lo porteremo al livello successivo e cercheremo di capire le animazioni in React. 

Iniziare

Crea una directory chiamata ReactAnimations. Passare alla directory e avviare il progetto utilizzando Node Package Manager o npm.

mkdir ReactAnimations cd ReactAnimations npm init

Installare reagire e reagire-dom al progetto. 

npm install react react-dom --save

Useremo webpack module bundler per questo progetto. Installare webpack e server di sviluppo webpack.

npm installa webpack webpack-dev-server --save-dev

Installa il Babele pacchetto da convertire JSX sintassi con JavaScript nel nostro progetto.

npm installa --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

Creare un file di configurazione richiesto da webpack-dev-Server dove definiremo il file di ingresso, il file di output e il caricatore babel. Ecco come webpack.config.js sembra:

module.exports = entry: './app.js', module: loaders: [exclude: / node_modules /, loader: 'babel-loader? preset [] = es2015 e preset [] = react'], output : nome file: 'bundle.js';

Creare un index.html file in cui verrà resa l'applicazione. Ecco come appare:

Crea un file chiamato app.js. Dentro app.js importare le librerie di reazione richieste come mostrato:

import Reagire da "reagire"; import render da 'react-dom';

Crea un componente stateless chiamato Casa che rende a H1 etichetta.

const Home = () => ritorno ( 
'TutsPlus - Benvenuto in React Animations!'
 ); ;

Rendi il componente Home all'interno dell'elemento app in index.html pagina. Ecco come app.js sembra:

import Reagire da "reagire"; import render da 'react-dom'; const Home = () => ritorno ( 
'TutsPlus - Benvenuto in React Animations'
 ); ; render ( , document.getElementById ('app'));

Salvare le modifiche precedenti e avviare il webpack server. Dovresti avere la tua app in esecuzione su http: // localhost: 8080 / index.html.

Animazioni in React

React fornisce una serie di utility aggiuntive per la creazione di app React. TransitionGroup e CSSTransitionGroup sono le API fornite per l'animazione.

Dalla documentazione ufficiale,

Il ReactTransitionGroup componente aggiuntivo è un'API di basso livello per l'animazione e ReactCSSTransitionGroup è un componente aggiuntivo per implementare facilmente animazioni e transizioni CSS di base.

Appear Animation

Iniziamo provando una semplice animazione in React. Installa il reagire-addons-css-transizione-group al progetto.

npm install react-addons-css-transition-group --save

Importare ReactCSSTransitionGroup dentro il app.js file.

importare ReactCSSTransitionGroup da 'react-addons-css-transition-group'

Dentro il Casa componente che hai creato, racchiudi il h2 tag all'interno del ReactCSSTransitionGroup etichetta.

  
'TutsPlus - Benvenuto in React Animations'
  

Usando il ReactCSSTransitionGroup tag, hai definito la parte in cui si svolgerà l'animazione. Hai specificato un nome per la transizione usando transitionName. Hai anche definito se la transizione apparire, entrare e partire dovrebbe accadere o meno.

Usando il nome di transizione definito all'interno di ReactCSSTransitionGroup, definirai le classi CSS che verrebbero eseguite all'apparire e quando sono in stato attivo. Aggiungi il seguente stile CSS al file index.html pagina.

.anim-appear opacity: 0,01;  .anim-appear.anim-appear-active opacity: 2; transizione: opacity 5s ease-in; 

Come avrai notato, devi specificare la durata dell'animazione sia nel metodo di rendering che nel CSS. È perché è così che React sa quando rimuovere le classi di animazione dall'elemento e quando rimuovere l'elemento dal DOM.

Salvare le modifiche precedenti e aggiornare la pagina. Una volta caricata la pagina, entro pochi secondi dovresti essere in grado di vedere il testo animato.

Entra / Lascia l'animazione

Per comprendere meglio l'animazione di invio e di uscita, creeremo una piccola applicazione React. L'app avrebbe una casella di testo per inserire il nome. Vedrai come aggiungere l'animazione di invio quando un nome viene aggiunto alla lista. 

Dentro app.js, creare una nuova classe chiamata App.

la classe App estende React.Component 

Inizializza a dati lista e a nome variabile all'interno dello stato iniziale del componente.

la classe App estende React.Component costruttore (oggetti di scena) super (oggetti di scena); this.state = data: [], nome: ";

All'interno della porzione di rendering del componente App, posizionare una casella di testo di input per l'immissione del nome e un pulsante per aggiungere il nome all'elenco di array.

 Inserisci il nome   
 

Definisci l'input handleChange evento e il Inserisci evento all'interno del componente App.

handleChange (e) this.setState (name: e.target.value)

Il handleChange evento imposta il valore della casella di testo di input su nome variabile. Ecco come appare il metodo di aggiunta:

add () var arr = this.state.data.slice (); arr.push ('id' :( new Date ()). getTime (), 'name': this.state.name) this.setState (data: arr)

Dentro il Inserisci metodo, il nome inserito e un ID univoco vengono inviati al dati lista di array.

Lega il handleChange e Inserisci metodo nel costruttore del componente App.

costruttore (oggetti di scena) super (oggetti di scena); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], nome: ";

Visualizzerai i nomi inseriti all'interno di un elenco. Modifica il codice HTML di rendering per aggiungere l'elenco.

 this.state.data.map (function (player) return 
nome del giocatore
 ) 

Per animare gli elementi aggiunti di recente, aggiungeremo il ReactCSSTransitionGroup taggare sul Li elementi.

  this.state.data.map (function (player) return 
nome del giocatore
 )  

Aggiungi il seguente CSS stile di transizione al index.html pagina. 

.anim-enter opacità: 0,01;  .anim-enter.anim-enter-active opacità: 2; transizione: opacity 5s ease-in; 

Ecco il componente App completo:

la classe App estende React.Component costruttore (oggetti di scena) super (oggetti di scena); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], nome: "; add () var arr = this.state.data.slice (); arr.push ('id' :( new Date ()). getTime (), 'nome': this.state.name) this.setState (data: arr) handleChange (e) this.setState (nome: e.target.value) render () return ( 
 Inserisci il nome   
  this.state.data.map (function (player) return 
nome del giocatore
 )  
 
 )

Salva quanto sopra e aggiorna la pagina. Inserisci un nome e inserisci il pulsante Aggiungi e l'elemento dovrebbe essere aggiunto all'elenco con l'animazione.

Allo stesso modo, l'animazione delle ferie può essere implementata anche nel codice sopra. Una volta implementata la funzionalità di eliminazione nell'applicazione, aggiungere il partire e leave-attiva classe al index.html. Impostare il transitionLeave a Vero nel ReactCSSTransitionGroup tag nel metodo di rendering e dovresti essere bravo a farlo. 

Avvolgendolo

In questo tutorial, hai visto come iniziare a utilizzare le animazioni in React. Hai creato una semplice app React e hai visto come implementare l'aspetto e inserire l'animazione. Per informazioni approfondite sulle animazioni in React, consiglierei di leggere la documentazione ufficiale.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Negli ultimi due anni, React è cresciuto in popolarità. In effetti, sul mercato sono disponibili numerosi articoli disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.

Fateci sapere i vostri pensieri nei commenti qui sotto. Dai un'occhiata alla mia pagina Envato Tuts + istruttore per ulteriori tutorial su React e sulle tecnologie web correlate.