Share
In de laatste paar handleidingen van React bent u vertrouwd geraakt met standaard React-concepten zoals JSX, routing en formulieren. In deze zelfstudie gaan we verder naar het volgende niveau en proberen we animaties in React te begrijpen.
Maak een map met de naam ReactAnimations. Navigeer naar de map en start het project met Node Package Manager of npm.
mkdir ReactAnimations cd ReactAnimations npm init
Installeren Reageer en reactie-dom naar het project.
npm install react-dom reageren - opslaan
We zullen gebruiken webpack modulebundelaar voor dit project. Installeren webpack en webpack-ontwikkelserver.
npm installeer webpack webpack-dev-server --save-dev
Installeer de Babel pakket om te zetten JSX syntaxis van JavaScript in ons project.
npm installeren --save-dev babel-core babel-loader babel-preset-reageren babel-preset-es2015
Maak een configuratiebestand vereist door webpack-dev-server waar we het invoerbestand, het uitvoerbestand en de babel loader zullen definiëren. Hier is hoe webpack.config.js ziet:
module.exports = entry: './app.js', module: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 & presets [] = reageer'], output : filename: 'bundle.js';
Creëer een index.html bestand waar de toepassing zal worden weergegeven. Hier is hoe het eruit ziet:
TutsPlus - Reageer op animaties
Maak een bestand met de naam app.js. Binnen app.js importeer de vereiste reactieverzamelingen zoals getoond:
import Reageren van 'reageren'; importeer render van 'react-dom';
Maak een stateless component genaamd Huis die een a maakt H1 label.
const Home = () => retour ('TutsPlus - Welkom bij animaties reageren!'
); ;
Render de Home-component binnen het app-element in de index.html pagina. Hier is hoe app.js ziet:
import Reageren van 'reageren'; importeer render van 'react-dom'; const Home = () => retour ('TutsPlus - Welkom bij React-animaties'
); ; maken (, document.getElementById ('app'));
Sla de bovenstaande wijzigingen op en start de webpack server. U moet uw app laten draaien op http: // localhost: 8080 / index.html.
React biedt een aantal add-on-hulpprogramma's voor het maken van React-apps. TransitionGroup en CSSTransitionGroup zijn de API's bedoeld voor animatie.
Van de officiële documentatie,
DeReactTransitionGroupadd-on component is een low-level API voor animatie, enReactCSSTransitionGroupis een add-on-component voor eenvoudige implementatie van elementaire CSS-animaties en overgangen.
Laten we beginnen met het uitproberen van een eenvoudige animatie in React. Installeer de reactie-add-css-overgangsgroep naar het project.
npm install react-addons-css-transition-group --save
Importeren ReactCSSTransitionGroup binnen in de app.js het dossier.
import ReactCSSTransitionGroup van 'react-addons-css-transition-group'
Binnen in de Huis component die u hebt gemaakt, sluit de h2 tag in de ReactCSSTransitionGroup label.
'TutsPlus - Welkom bij React-animaties'
De ... gebruiken ReactCSSTransitionGroup tag, hebt u het gedeelte gedefinieerd waar de animatie zou plaatsvinden. U hebt een naam opgegeven voor de overgang met transitionName. Je hebt ook bepaald of de overgang verschijnt, binnenkomt en weggaat moet gebeuren of niet.
De overgangsnaam gebruiken die is gedefinieerd in de ReactCSSTransitionGroup, u definieert de CSS-klassen die zouden worden uitgevoerd bij verschijnen en in de actieve status. Voeg de volgende CSS-stijl toe aan de index.html pagina.
.anim-appear opacity: 0.01; .anim-appear.anim-appear-active opacity: 2; overgang: transparantie 5s gemak;
Zoals je zou hebben gemerkt, moet je de duur van de animatie opgeven, zowel in de weergavemethode als in de CSS. Dat komt omdat React weet wanneer de animatieklassen uit het element moeten worden verwijderd en wanneer het element uit de DOM moet worden verwijderd.
Sla de bovenstaande wijzigingen op en vernieuw de pagina. Nadat de pagina is geladen, kunt u binnen enkele seconden de geanimeerde tekst zien.
Om een beter begrip van de enter- en leave-animatie te krijgen, maken we een kleine React-applicatie. De app zou een invoertekstvak hebben om de naam in te voeren. U ziet hoe u de Enter-animatie toevoegt wanneer een naam aan de lijst wordt toegevoegd.
Binnen app.js, maak een nieuwe klasse genaamd App.
class-app breidt React.Component uit
Initialiseren a gegevens lijst en a naam variabel binnen de initiële status van het onderdeel.
klasse App breidt React.Component constructor (props) super (rekwisieten); this.state = data: [], name: ";
Binnen het rendergedeelte van het app-onderdeel plaatst u een invoertekstvak voor het invoeren van de naam en een knop om de naam aan de arraylijst toe te voegen.
Voer naam in
Definieer de invoer handleChange evenement en de toevoegen evenement binnen de app-component.
handleChange (e) this.setState (name: e.target.value)
De handleChange event stelt de waarde van het invoertekstvak in op de naam variabel. Hier ziet u hoe de methode voor het toevoegen eruitziet:
Accentsconagua
add () var arr = this.state.data.slice (); arr.push ('id' :( nieuwe datum ()). getTime (), 'name': this.state.name) this.setState (data: arr)Binnen in de toevoegen methode, de ingevoerde naam en een unieke ID wordt naar de gegevens arraylijst.
Bind de handleChange en toevoegen methode in de constructor van de app-component.
constructor (rekwisieten) super (rekwisieten); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], name: ";
U toont de ingevoerde namen in een lijst. Wijzig de renderen HTML-code om de lijst toe te voegen.
Om de nieuw toegevoegde items te animeren, voegen we de ReactCSSTransitionGroup tag over de li elementen.
Voeg het volgende toe CSS overgangsstijl naar de index.html pagina.
.anim-enter opacity: 0,01; .anim-enter.anim-enter-active opacity: 2; overgang: transparantie 5s gemak;
Hier is de volledige app-component:
klasse App breidt React.Component constructor (props) super (rekwisieten); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], name: "; add () var arr = this.state.data.slice (); arr.push ('id' :( nieuwe datum ()). getTime (), 'naam': this.state.name) this.setState (data: arr) handleChange (e) this.setState (name: e.target.value) render () ga terug ( Voer naam in this.state.data.map (functie (speler) ga terug - Naam speler
)
)Sla het bovenstaande op en vernieuw de pagina. Voer een naam in en voer de knop Toevoegen in en het item moet met animatie aan de lijst worden toegevoegd.
Evenzo kan de verlofanimatie ook in de bovenstaande code worden geïmplementeerd. Nadat de verwijderfunctie is geïmplementeerd in de toepassing, voegt u de het verlof en reactie-actief klasse voor de index.html. Stel de transitionLeave naar waar in de ReactCSSTransitionGroup tag in de rendermethode, en je zou goed moeten zijn om te gaan.
In deze zelfstudie zag je hoe je aan de slag ging met het gebruik van animaties in React. Je hebt een eenvoudige React-app gemaakt en zag hoe je de verschijnen en enter-animatie implementeerde. Voor uitgebreide informatie over animaties in React, raad ik u aan de officiële documentatie te lezen.
De broncode van deze tutorial is beschikbaar op GitHub.
In het afgelopen jaar is React in populariteit gegroeid. We hebben zelfs een aantal items op de markt die beschikbaar zijn voor aankoop, beoordeling, implementatie enzovoort. Als u op zoek bent naar extra bronnen rond React, aarzel dan niet om ze te bekijken.
Laat het ons weten in de reacties hieronder. Kijk eens op mijn Envato Tuts + instructeurspagina voor meer tutorials over React en aanverwante webtechnologieën.
