Share
În ultimele tutoriale React, te-ai familiarizat cu concepte de bază React cum ar fi JSX, rutare și formulare. În acest tutorial, vom trece la nivelul următor și vom încerca să înțelegem animațiile în React.
Creați un director numit ReactAnimations. Navigați la director și inițiați proiectul folosind Node Package Manager sau npm.
mkdir ReactAnimații cd ReactAnimations npm init
Instalare reacţiona și reacționează-dom la proiect.
npm instalează reacția react-dom --save
Vom folosi WebPACK modulul bundler pentru acest proiect. Instalare WebPACK și server de dezvoltare webpack.
npm instalare webpack webpack-dev-server -save-dev
Instalați hărmălaie pachet pentru a converti JSX sintaxă pentru JavaScript în proiectul nostru.
npm instalare -save-dev babel-core babel-încărcător babel-preset-react babel-preset-es2015
Creați un fișier de configurare cerut de WebPACK-dev-server unde vom defini fișierul de intrare, fișierul de ieșire și încărcătorul babel. Iată cum webpack.config.js arată:
module.exports = entry: './app.js', modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 & presets [ : fișier: 'bundle.js';
Creaza un index.html fișierul în care aplicația va fi redată. Iată cum arată:
TutsPlus - Reacționează animații
Creați un fișier numit app.js. Interior app.js importați bibliotecile de reacție necesare așa cum se arată:
import Reacționează de la "reacționează"; import render de la "react-dom";
Creați o componentă apatridă numită Acasă care face a H1 etichetă.
const Home = () => return ('TutsPlus - Bine ați venit la reacții de animație!'
); ;
Rândiți componenta Acasă în interiorul elementului de aplicație din index.html pagină. Iată cum app.js arată:
import Reacționează de la "reacționează"; import render de la "react-dom"; const Home = () => return ('TutsPlus - Bine ați venit la reacții de animație'
); ; face(, document.getElementById ('app'));
Salvați modificările de mai sus și porniți WebPACK Server. Ar trebui să aveți aplicația să ruleze la adresa http: // localhost: 8080 / index.html.
React oferă un număr de utilitare suplimentare pentru crearea aplicațiilor React. TransitionGroup și CSSTransitionGroup sunt API-urile furnizate pentru animație.
Din documentația oficială,
ReactTransitionGroupcomponenta add-on este un API de nivel scăzut pentru animație șiReactCSSTransitionGroupeste o componentă de completare pentru implementarea cu ușurință a animațiilor și tranzițiilor CSS de bază.
Să începem prin a încerca o animație simplă în React. Instalați reacționează-addons-css-tranziție-grup la proiect.
npm instalează react-addons-css-group-transition -save
Import ReactCSSTransitionGroup în interiorul app.js fişier.
importați grupul ReactCSSTransition din grupul "react-addons-css-transition-group"
În interiorul Acasă componentă pe care ați creat-o, închideți-o h2 eticheta în interiorul ReactCSSTransitionGroup etichetă.
'TutsPlus - Bine ați venit la reacții de animație'
Utilizarea ReactCSSTransitionGroup tag, ați definit partea în care va avea loc animația. Ați specificat un nume pentru tranziție utilizând transitionName. De asemenea, ați definit dacă tranziția apare, intră și pleacă ar trebui să se întâmple sau nu.
Folosind numele de tranziție definit în interiorul ReactCSSTransitionGroup, veți defini clasele CSS care vor fi executate la apariția și când sunt în stare activă. Adăugați următorul stil CSS la index.html pagină.
.anim-apare opacitate: 0,01; .anim-apare.anim-apare-activ opacitate: 2; tranziție: opacitatea 5s ușurință;
Așa cum ați fi observat, trebuie să specificați durata de animație atât în metoda rendering, cât și în CSS. Aceasta deoarece React știe când să elimine clasele de animație din element și când să elimine elementul din DOM.
Salvați modificările de mai sus și actualizați pagina. Odată ce pagina a fost încărcată, în câteva secunde ar trebui să puteți vedea textul animat.
Pentru a înțelege mai bine intrarea și părăsirea animației, vom crea o mică aplicație React. Aplicația va avea o casetă de text pentru introducerea numelui. Veți vedea cum să adăugați animația de introducere atunci când un nume este adăugat în listă.
Interior app.js, creați o nouă clasă numită App.
clasa App extinde React.Component
Inițializați o date listă și a Nume variabilă în starea inițială a componentei.
clasa App extinde React.Component constructor (recuzită) super (recuzită); this.state = date: [], nume: ";
În interiorul porțiunii de randare a componentei App, plasați o casetă de text pentru introducerea numelui și un buton pentru a adăuga numele în lista de elemente de matrice.
Introdu numele
Definiți intrarea handleChange eveniment și adăuga eveniment din interiorul componentei App.
handleChange (e) this.setState (nume: e.target.value
handleChange evenimentul setează valoarea casetei de text de intrare la Nume variabil. Iată cum arată metoda de adăugare:
adăugați () var arr = this.state.data.slice (); (date: arr
În interiorul adăuga metoda, numele introdus și un ID unic este împins la date array list.
Legați-vă handleChange și adăuga în constructorul componentei App.
constructor (recuzită) super (recuzită); this.add = this.add.bind (aceasta); this.handleChange = this.handleChange.bind (aceasta); this.state = date: [], nume: ";
Veți afișa numele introduse într-o listă. Modificați codul HTML de redare pentru a adăuga lista.
Pentru a anima elementele nou adăugate, vom adăuga ReactCSSTransitionGroup eticheta peste Li element.
Adăugați următoarele CSS stil de tranziție la index.html pagină.
.anim-introduce opacitate: 0,01; .anim-enter.anim-introduceți-activ opacitate: 2; tranziție: opacitatea 5s ușurință;
Aici este componenta completă a aplicației:
Accentsconagua
clasa App extinde React.Component constructor (recuzită) super (recuzită); this.add = this.add.bind (aceasta); this.handleChange = this.handleChange.bind (aceasta); aceasta data = date: [], nume: "; add () var arr = this.state.data.slice (); arr.push ('id' :( new Date (nume: e.target.value render () return () return () ( Introdu numele this.state.data.map (funcția (jucător)) retur - numele jucatorului
)Salvați cele de mai sus și actualizați pagina. Introduceți un nume și introduceți butonul de adăugare, iar elementul trebuie adăugat în lista cu animație.
În mod similar, animația de concediu poate fi implementată și în codul de mai sus. După ce funcția de ștergere a fost implementată în aplicație, adăugați părăsi și pleca-active clasa la index.html. Seteaza transitionLeave la Adevărat în ReactCSSTransitionGroup tag-ul în metoda de render, și ar trebui să fii bun pentru a merge.
În acest tutorial, ați văzut cum să începeți să utilizați animațiile în React. Ați creat o aplicație simplă React și ați văzut cum să implementați apariția și să introduceți animația. Pentru informații detaliate privind animațiile din React, aș recomanda citirea documentației oficiale.
Codul sursă din acest tutorial este disponibil pe GitHub.
În ultimii doi ani, React a crescut în popularitate. De fapt, avem un număr de elemente de pe piață care sunt disponibile pentru cumpărare, revizuire, implementare și așa mai departe. Dacă sunteți în căutarea unor resurse suplimentare în jurul React, nu ezitați să le verificați.
Spuneți-ne gândurile dvs. în comentariile de mai jos. Aruncați o privire la pagina de instructor Envato Tuts + pentru mai multe tutoriale despre tehnologiile React și alte tehnologii web asociate.
