Share
In den letzten beiden React-Tutorials haben Sie sich mit grundlegenden React-Konzepten wie JSX, Routing und Formularen vertraut gemacht. In diesem Tutorial werden wir es auf die nächste Stufe bringen und versuchen, Animationen in React zu verstehen.
Erstellen Sie ein Verzeichnis mit dem Namen ReactAnimations. Navigieren Sie zu dem Verzeichnis und initiieren Sie das Projekt mit Node Package Manager oder npm.
mkdir ReactAnimations cd ReactAnimations npm init
Installieren reagieren und reagieren dom zum Projekt.
Installieren Sie npm reave-dom --save
Wir werden verwenden Webpack Modulbündler für dieses Projekt. Installieren Webpack und Webpack-Entwicklungsserver.
npm install webpack webpack-dev-server --save-dev
Installiere das Babel Paket zu konvertieren JSX Syntax für JavaScript in unserem Projekt.
npm install --save-dev Babel-Core Babel-Loader Babel-Preset-React Babel-Preset-es2015
Erstellen Sie eine Konfigurationsdatei, die von benötigt wird webpack-dev-server Wo definieren wir die Eingabedatei, Ausgabedatei und den Babel Loader. Hier ist, wie webpack.config.js sieht aus:
module.exports = entry: './app.js', Modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 & presets [] = reag'], ausgabe : Dateiname: 'bundle.js';
Erstelle ein index.html Datei, in der die Anwendung gerendert wird. So sieht es aus:
TutsPlus - Reakt Animationen
Erstellen Sie eine Datei mit dem Namen app.js. Innerhalb app.js Importieren Sie die erforderlichen Reaktibibliotheken wie gezeigt:
import Reagieren von 'Reagieren'; import render von 'react-dom';
Erstellen Sie eine zustandslose Komponente, die aufgerufen wird Zuhause das macht ein H1 Etikett.
const Home = () => return ('TutsPlus - Willkommen, um Animationen zu reagieren!'
); ;
Rendern Sie die Home-Komponente innerhalb des App-Elements in der index.html Seite. Hier ist, wie app.js sieht aus:
import Reagieren von 'Reagieren'; import render von 'react-dom'; const Home = () => return ('TutsPlus - Willkommen, um Animationen zu reagieren'
); ; machen(, document.getElementById ('app'));
Speichern Sie die obigen Änderungen und starten Sie die Webpack Server. Sie sollten Ihre App unter http: // localhost: 8080 / index.html ausführen.
React bietet eine Reihe von Zusatzprogrammen zum Erstellen von React-Apps. Übergangsgruppe und CSSTransitionGroup sind die für die Animation bereitgestellten APIs.
Aus der offiziellen Dokumentation,
DasReactTransitionGroupAdd-On-Komponente ist eine einfache API für Animationen undReactCSSTransitionGroupist eine Zusatzkomponente zur einfachen Implementierung grundlegender CSS-Animationen und -Übergänge.
Beginnen wir damit, eine einfache Animation in React auszuprobieren. Installiere das reag-addons-css-übergangsgruppe zum Projekt.
Installiere npm install-addons-css-transition-group --save
Einführen ReactCSSTransitionGroup in der app.js Datei.
ReactCSSTransitionGroup aus 'Reakt-Addons-Css-Übergangsgruppe' importieren
In der Zuhause Komponente, die Sie erstellt haben, wickeln Sie die h2 tag in der ReactCSSTransitionGroup Etikett.
'TutsPlus - Willkommen, um Animationen zu reagieren'
Verwendung der ReactCSSTransitionGroup Sie haben den Abschnitt definiert, in dem die Animation stattfinden würde. Sie haben mit einen Namen für den Übergang angegeben Übergangsname. Sie haben auch festgelegt, ob der Übergang erscheinen soll, eingeben und verlassen soll oder nicht.
Verwenden Sie den Übergangsnamen, der im definiert ist ReactCSSTransitionGroup, Sie definieren die CSS-Klassen, die ausgeführt werden sollen und im aktiven Zustand sind. Fügen Sie den folgenden CSS-Stil hinzu index.html Seite.
.anim-erscheinen Opazität: 0,01; .anim-erscheinen.anim-erscheinen-aktiv Deckkraft: 2; Übergang: Deckkraft 5s Leichtigkeit;
Wie Sie bemerkt haben, müssen Sie die Animationsdauer sowohl in der Render-Methode als auch im CSS angeben. Dies liegt daran, dass React weiß, wann die Animationsklassen aus dem Element entfernt werden sollen und wann das Element aus dem DOM entfernt wird.
Speichern Sie die obigen Änderungen und aktualisieren Sie die Seite. Sobald die Seite geladen ist, sollten Sie den animierten Text innerhalb weniger Sekunden sehen können.
Um die Eingabe- und Verlassen-Animation besser zu verstehen, erstellen wir eine kleine React-Anwendung. Die App verfügt über ein Eingabefeld zur Eingabe des Namens. Sie erfahren, wie Sie die Eingabe-Animation hinzufügen, wenn der Liste ein Name hinzugefügt wird.
Innerhalb app.js, Erstellen Sie eine neue Klasse namens App.
Klasse App erweitert React.Component
Initialisieren Sie a Daten Liste und a Name Variable im Anfangszustand der Komponente.
Klasse App erweitert React.Component Konstruktor (Requisiten) Super (Requisiten); this.state = data: [], name: ";
Platzieren Sie im Renderteil der App-Komponente ein Eingabetextfeld zur Eingabe des Namens und eine Schaltfläche, um den Namen der Array-Liste hinzuzufügen.
Name eingeben
Definieren Sie die Eingabe handleChange Ereignis und die hinzufügen Ereignis in der App-Komponente.
handleChange (e) this.setState (name: e.target.value)
Das handleChange event setzt den Wert des Eingabetextfelds auf Name Variable. So sieht die Add-Methode aus:
Accentsconagua
add () var arr = this.state.data.slice (); arr.push ('id' :( neues Datum ()). getTime (), 'name': this.state.name) this.setState (data: arr)In der hinzufügen Methode wird der eingegebene Name und eine eindeutige ID in die Daten Anordnungsliste.
Binden Sie die handleChange und hinzufügen Methode im Konstruktor der App-Komponente.
Konstruktor (Requisiten) Super (Requisiten); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], name: ";
Sie werden die eingegebenen Namen in einer Liste anzeigen. Ändern Sie den Render-HTML-Code, um die Liste hinzuzufügen.
Um die neu hinzugefügten Elemente zu animieren, fügen wir das hinzu ReactCSSTransitionGroup über dem li Elemente.
Fügen Sie folgendes hinzu CSS Übergangsstil zum index.html Seite.
.anim-enter Opazität: 0,01; .anim-enter.anim-enter-active Deckkraft: 2; Übergang: Deckkraft 5s Leichtigkeit;
Hier ist die komplette App-Komponente:
Klasse App erweitert React.Component Konstruktor (Requisiten) Super (Requisiten); 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' :( new Date ()). getTime (), 'name': this.state.name) this.setState (data: arr) handleChange (e) this.setState (name: e.target.value) render () return ( Name eingeben this.state.data.map (Funktion (Spieler) Zurückkehren - Spielername
)
)Speichern Sie das oben und aktualisieren Sie die Seite. Geben Sie einen Namen ein und geben Sie die Schaltfläche "Hinzufügen" ein. Das Element sollte der Liste mit Animation hinzugefügt werden.
In ähnlicher Weise kann die Urlaubsanimation auch im obigen Code implementiert werden. Sobald die Löschfunktion in der Anwendung implementiert wurde, fügen Sie das hinzu verlassen und verlassen lassen Klasse zum index.html. Stellen Sie das ein Übergangslevel zu Wahr in dem ReactCSSTransitionGroup Tag in der Rendermethode, und Sie sollten gut sein.
In diesem Lernprogramm haben Sie erfahren, wie Sie mit den Animationen in React arbeiten können. Sie haben eine einfache React-App erstellt und gesehen, wie Sie das Erscheinen implementieren und die Animation eingeben. Für ausführliche Informationen zu Animationen in React würde ich empfehlen, die offizielle Dokumentation zu lesen.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.
Im letzten Jahr hat React an Popularität gewonnen. Tatsächlich gibt es auf dem Marktplatz eine Reihe von Artikeln, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.
Teilen Sie uns Ihre Meinung in den Kommentaren unten mit. Auf meiner Envato Tuts + Instructor-Seite finden Sie weitere Tutorials zu React und verwandten Webtechnologien.
