Introduktion till animationer i React

I de senaste Reaktionshandledningarna fick du kännedom om grundläggande React-koncept som JSX, routing och formulär. I den här handledningen tar vi den till nästa nivå och försöker förstå animeringar i React. 

Komma igång

Skapa en katalog som heter ReactAnimations. Navigera till katalogen och initiera projektet med Node Package Manager eller npm.

mkdir ReactAnimations cd ReactAnimations npm init

Installera reagera och reagerar-dom till projektet. 

npm installera reagera reagera dom - save

Vi ska använda Webpack modulbuntaren för detta projekt. Installera Webpack och webpack utvecklingsservern.

npm installera webpack webpack-dev-server - save-dev

Installera babel paket för att konvertera JSX syntax till JavaScript i vårt projekt.

npm installera - save-dev babel-core babel-loader babel-preset-reagera babel-preset-es2015

Skapa en konfigurationsfil som krävs av Webpack-dev-server där vi ska definiera inmatningsfilen, utdatafilen och babellastaren. Så här är det webpack.config.js utseende:

module.exports = entry: './app.js', modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 och förinställningar [] = reagera : filnamn: 'bundle.js';

Skapa en index.html fil där ansökan kommer att göras. Så här ser det ut:

Skapa en fil som heter app.js. Inuti app.js importera de nödvändiga reaktionsbiblioteken enligt följande:

Import Reakt från "reagera"; importera render från 'react-dom';

Skapa en statslös komponent som heter Hem vilket gör a H1 märka.

const Hem = () => returnera ( 
'TutsPlus - Välkommen till React Animations!'
 ); ;

Lämna hemkomponenten inuti appelementet i index.html sida. Så här är det app.js utseende:

Import Reakt från "reagera"; importera render från 'react-dom'; const Hem = () => returnera ( 
'TutsPlus - Välkommen till React Animations'
 ); ; göra( , document.getElementById ('app'));

Spara ovanstående ändringar och starta Webpack server. Du ska få din app att köra på http: // localhost: 8080 / index.html.

Animationer i React

React ger ett antal tilläggsverktyg för att skapa React apps. TransitionGroup och CSSTransitionGroup är API: erna för animering.

Från den officiella dokumentationen,

De ReactTransitionGroup tilläggskomponent är ett API på låg nivå för animering, och ReactCSSTransitionGroup är en tilläggskomponent för enkel implementering av grundläggande CSS-animationer och övergångar.

Visa animation

Låt oss börja med att prova en enkel animering i React. Installera reagerar-addons-css-övergång-grupp till projektet.

npm installera reaktions-addons-css-transition-group -save

Importera ReactCSSTransitionGroup inuti app.js fil.

importera ReactCSSTransitionGroup från "reagera-addons-css-transition-group"

Inuti Hem komponent som du skapade, släng upp h2 tagga inuti ReactCSSTransitionGroup märka.

  
'TutsPlus - Välkommen till React Animations'
  

Använda ReactCSSTransitionGroup tagg har du definierat den del där animering skulle äga rum. Du har angett ett namn för övergången med transitionName. Du har också definierat om övergången ska visas, ange och lämna ska ske eller inte.

Använd övergångsnamnet definierat inuti ReactCSSTransitionGroup, du definierar CSS-klasserna som skulle utföras på visas och när de är i aktivt läge. Lägg till följande CSS-stil i index.html sida.

.anim-appear opacity: 0.01;  .anim-appear.anim-appear-active opacitet: 2; övergång: opacity 5s lätt in; 

Som du skulle ha märkt måste du ange animationsvaraktigheten både i renderingsmetoden och i CSS. Det är för att det är hur React vet när man tar bort animeringsklasserna från elementet och när man tar bort elementet från DOM.

Spara ovanstående ändringar och uppdatera sidan. När sidan har laddats, ska du inom några sekunder se den animerade texten.

Ange / Lämna animering

För att få en bättre förståelse för enter och lämna animering, skapar vi en liten React-applikation. Appen skulle ha en inmatad textruta för att skriva in namnet. Du får se hur du lägger till enter animationen när ett namn läggs till i listan. 

Inuti app.js, skapa en ny klass som heter App.

klass App utökar React.Component 

Initiera a data lista och a namn variabel inuti komponentens initialtillstånd.

klass App sträcker sig React.Component konstruktör (rekvisita) super (rekvisita); this.state = data: [], name: ";

Inne i delarna av App-komponenten placerar du en inmatad textruta för att ange namnet och en knapp för att lägga till namnet på matrislistan.

 Skriv namn   
 

Definiera ingången handleChange händelse och Lägg till händelse inne i App-komponenten.

hanteraÄndra (e) this.setState (namn: e.target.value)

De handleChange händelse sätter värdet på inmatningstextrutan till namn variabel. Så här ser tilläggsmetoden ut:

lägg till () var ar = this.state.data.slice (); arr.push (id :( new Date ()). getTime (), 'namn': this.state.name) this.setState (data: arr)

Inuti Lägg till metod, det inmatade namnet och ett unikt ID skjuts till data matrislista.

Binda in handleChange och Lägg till metod i App-komponentens konstruktör.

konstruktör (rekvisita) super (rekvisita); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], name: ";

Du kommer att visa de inmatade namnen i en lista. Ändra render HTML-koden för att lägga till listan.

 this.state.data.map (funktion (spelare) return 
spelarnamn
 ) 

För att animera de nyligen tillagda objekten lägger vi till ReactCSSTransitionGroup tagga över li element.

  this.state.data.map (funktion (spelare) return 
spelarnamn
 )  

Lägg till följande CSS övergångsstil till index.html sida. 

.anim-enter opacitet: 0,01;  .anim-enter.anim-enter-aktiv opacitet: 2; övergång: opacity 5s lätt in; 

Här är den fullständiga App-komponenten:

klass App sträcker sig React.Component konstruktör (rekvisita) super (rekvisita); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], namn: "; add () var arr = this.state.data.slice (); arr.push ('id' :( nytt datum ()). getTime (name: e.target.value) render () returnera) return.text ( 
 Skriv namn   
  this.state.data.map (funktion (spelare) return 
spelarnamn
 )  
 
 )

Spara ovanstående och uppdatera sidan. Ange ett namn och ange add-knappen och objektet ska läggas till i listan med animering.

På samma sätt kan ledighetsanimationen också implementeras i ovanstående kod. När borttagningsfunktionen har implementerats i programmet lägger du till lämna och lämna-aktiv klass till index.html. Ställ in transitionLeave till Sann i ReactCSSTransitionGroup tag i renderingsmetoden, och du borde vara bra att gå. 

Wrapping It Up

I den här handledningen såg du hur du började med att använda animeringar i React. Du skapade en enkel React app och såg hur du implementerar visas och skriv in animering. För djup information om animationer i React rekommenderar jag att du läser den officiella dokumentationen.

Källkoden från denna handledning finns på GitHub.

Under de senaste åren har React vuxit i popularitet. Faktum är att vi har ett antal objekt på marknaden som är tillgängliga för köp, granskning, genomförande och så vidare. Om du letar efter ytterligare resurser runt React, tveka inte att kolla in dem.

Låt oss veta dina tankar i kommentarerna nedan. Ta en titt på min Envato Tuts + instruktörssida för mer handledning om React och relaterad webbteknik.