Introduksjon til animasjoner i React

I de siste par React-opplæringene ble du kjent med grunnleggende React-konsepter som JSX, ruting og skjemaer. I denne opplæringen tar vi det til neste nivå og prøver å forstå animasjoner i React. 

Starter

Opprett en katalog som heter ReactAnimations. Naviger til katalogen og start prosjektet ved hjelp av Node Package Manager eller npm.

mkdir ReactAnimations cd ReactAnimations npm init

Installere reagere og reagere-dom til prosjektet. 

npm installere reagerer reagerer dom - save

Vi skal bruke Webpack modulpakker for dette prosjektet. Installere Webpack og webpack utvikling server.

npm installere webpack webpack-dev-server - save-dev

Installer babel pakke for å konvertere jsx syntaks til JavaScript i vårt prosjekt.

npm installere - save-dev babel-core babel-loader babel-preset-reagerer babel-preset-es2015

Opprett en konfigurasjonsfil som kreves av Webpack-dev-serveren hvor vi skal definere oppføringsfilen, utdatafilen og babellasteren. Her er hvordan webpack.config.js utseende:

module.exports = entry: '. /app.js', modul: loaders: [ekskluder: / node_modules /, loader: 'babel-loader? presets [] = es2015 og forhåndsinnstillinger [] = reagere : filnavn: 'bundle.js';

Lag en index.html fil der søknaden skal gjengis. Slik ser det ut:

Opprett en fil som heter app.js. Innsiden app.js importer de nødvendige reaksjonsbiblioteker som vist:

Import Reakt fra 'reagere'; importer render fra 'react-dom';

Opprett en statsløs komponent som heter Hjem som gjør a H1 stikkord.

const Hjem = () => retur ( 
'TutsPlus - Velkommen til React Animations!'
 ); ;

Sett hjemkomponenten i app-elementet i index.html side. Her er hvordan app.js utseende:

Import Reakt fra 'reagere'; importer render fra 'react-dom'; const Hjem = () => retur ( 
'TutsPlus - Velkommen til React Animations'
 ); ; gjengi ( , document.getElementById ('app'));

Lagre endringene ovenfor og start Webpack server. Du bør få appen din å kjøre på http: // localhost: 8080 / index.html.

Animasjoner i React

React gir en rekke tilleggsverktøy for å opprette React apps. TransitionGroup og CSSTransitionGroup er APIene gitt for animasjon.

Fra den offisielle dokumentasjonen,

De ReactTransitionGroup tilleggskomponent er en API på lavt nivå for animasjon, og ReactCSSTransitionGroup er en tilleggskomponent for enkelt å implementere grunnleggende CSS-animasjoner og overganger.

Vis animasjon

La oss begynne med å prøve en enkel animasjon i React. Installer reagerer-addons-css-overgang-gruppe til prosjektet.

npm installere reaksjons-addons-css-transition-group -save

Importere ReactCSSTransitionGroup inne i app.js fil.

importer ReactCSSTransitionGroup fra 'reaksjons-addons-css-transition-group'

Inne i Hjem komponent som du opprettet, pakker opp h2 tag inne i ReactCSSTransitionGroup stikkord.

  
'TutsPlus - Velkommen til React Animations'
  

Bruker ReactCSSTransitionGroup tag, har du definert delen der animasjonen skulle finne sted. Du har angitt et navn for overgangen ved hjelp av transitionName. Du har også definert om overgangen skal vises, gå inn og gå, skal skje eller ikke.

Bruk overgangsnavnet som er definert i ReactCSSTransitionGroup, Du definerer CSS-klassene som vil bli utført på vises og når i aktiv tilstand. Legg til følgende CSS-stil i index.html side.

.anim-appear opacity: 0.01;  .anim-appear.anim-appear-active opacity: 2; Overgang: Opacity 5s easy-in; 

Som du ville ha lagt merke til, må du angi animasjonsvarigheten både i gjengemetoden og i CSS. Det er fordi det er hvordan React vet når du skal fjerne animasjonsklassene fra elementet og når du skal fjerne elementet fra DOM.

Lagre endringene ovenfor og oppdater siden. Når siden har lastet inn, skal du innen noen få sekunder se den animerte teksten.

Enter / Leave Animation

For å få en bedre forståelse av enter og forlate animasjon, oppretter vi et lite React-program. Appen ville ha en inntastingsboks for å skrive inn navnet. Du får se hvordan du legger til enter animasjonen når et navn er lagt til i listen. 

Innsiden app.js, opprett en ny klasse kalt app.

klassen App utvider React.Component 

Initialiser en data liste og a Navn variabel inne i komponentens opprinnelige tilstand.

klassen App utvider React.Component konstruktør (rekvisitter) super (rekvisitter); this.state = data: [], navn: ";

Inne i gjengedelen av App-komponenten, legg inn en tekstfelt for å skrive inn navnet og en knapp for å legge til navnet på matelisten.

 Skriv inn navn   
 

Definer inngangen handleChange arrangement og Legg til hendelse i App-komponenten.

håndtereEndre (e) this.setState (navn: e.target.value)

De handleChange hendelsen setter verdien av inntastingsboksen til Navn variabel. Her ser du hvordan tilførselsmetoden ser ut:

legg til () var arr = this.state.data.slice (); arr.push ('id' :( ny dato ()). getTime (), 'navn': this.state.name) this.setState (data: arr)

Inne i Legg til Metode, det angitte navnet og en unik ID blir skjøvet til data array listen.

Bind inn handleChange og Legg til metode i App komponentens konstruktør.

konstruktør (rekvisitter) super (rekvisitter); this.add = this.add.bind (dette); this.handleChange = this.handleChange.bind (dette); this.state = data: [], navn: ";

Du vil vise de angitte navnene i en liste. Endre gjengiv HTML-koden for å legge til listen.

 this.state.data.map (funksjon (spiller) return 
spillernavn
 ) 

For å animere de nylig lagt til elementene, legger vi til ReactCSSTransitionGroup tag over li elementer.

  this.state.data.map (funksjon (spiller) return 
spillernavn
 )  

Legg til følgende CSS overgangsstil til index.html side. 

.anim-enter opacity: 0.01;  .anim-enter.anim-enter-aktiv opacity: 2; Overgang: Opacity 5s easy-in; 

Her er den komplette App-komponenten:

klassen App utvider React.Component konstruktør (rekvisitter) super (rekvisitter); this.add = this.add.bind (dette); this.handleChange = this.handleChange.bind (dette); this.state = data: [], navn: "; add () var arr = this.state.data.slice (); arr.push ('id' :( ny dato ()). getTime (): 'navn': this.state.name) this.setState (data: arr handleChange (e) this.setState (navn: e.target.value) render ( 
 Skriv inn navn   
  this.state.data.map (funksjon (spiller) return 
spillernavn
 )  
 
 )

Lagre det ovenfor og oppdatere siden. Skriv inn et navn og skriv inn add-knappen, og elementet skal legges til listen med animasjon.

På samme måte kan permisjonen med permisjon også implementeres i koden ovenfor. Når slettingsfunksjonaliteten er implementert i programmet, legg til permisjon og la aktive klasse til index.html. Sett transitionLeave til ekte i ReactCSSTransitionGroup tag i gjengivelsesmetoden, og du bør være god å gå. 

Pakke det opp

I denne veiledningen så du hvordan du kommer i gang med å bruke animasjoner i React. Du opprettet en enkel React-app, og så hvordan du implementerer utseendet og skriv inn animasjon. For grundig informasjon om animasjoner i React, vil jeg anbefale å lese den offisielle dokumentasjonen.

Kildekoden fra denne opplæringen er tilgjengelig på GitHub.

I løpet av de siste par årene har React vokst i popularitet. Faktisk har vi en rekke elementer i markedet som er tilgjengelige for kjøp, gjennomgang, implementering og så videre. Hvis du leter etter flere ressurser rundt React, ikke nøl med å sjekke dem ut.

Gi oss beskjed om dine tanker i kommentarene nedenfor. Ta en titt på min Envato Tuts + instruktør side for flere opplæringsprogrammer på React og relatert webteknologi.