Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Introduzione alle Animazioni in React

by
Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Negli ultimi tutorials, avete preso familiarità con concetti base di React come JSX, routing e forms. In questo tutorial, passeremo al prossimo livello e cercheremo di comprendere le animazioni in React.

Introduzione

Create una directory denominata ReactAnimations. Navigate dentro la directory e avviate il progetto usando Node Package Manager o npm.

Installate react e react-dom nel progetto.

Useremo il bundler del modulo webpack per questo progetto. Installate webpack e il server di sviluppo webpack.

Installate il package babel per convertire la sintassi JSX in JavaScript nel nostro progetto.

Create un file di configurazione richiesto da webpack-dev-server dove definiremo il file iniziale, il file di output e il loader di babel. Ecco come apparirà webpack.config.js:

Create un file index.html dove verrà eseguito il rendering dell'applicazione. Ecco il risultato:

Create un file chiamato app.js. All'interno di app.js importate le librerie react richieste come mostrato:

Create un componente stateless chiamato Home che esegua il rendering di un tag H1.

Eseguite il rendering del componente Home dentro l'elemento app nella pagina index.html. Di seguito come apparirà app.js:

Salvate le modifiche soprastanti e avviate il server webpack. Dovreste avere l'applicazione avviata in http://localhost:8080/index.html.

Animazioni in React

React fornisce un numero di utilities add-on per sviluppare applicazioni. TransitionGroup e CSSTransitionGroup sono le APIs fornite per l'animazione.

Dalla documentazione ufficiale,

Il componente add-on ReactTransitionGroup è un API di basso livello per l'animazione, e ReactCSSTransitionGroup è un componente add-on per implementare facilmente semplici animazioni e transizioni CSS.

Appear Animation

Cominciamo provando una semplice animazione in React. Installate react-addons-css-transition-group nel progetto.

Importate ReactCSSTransitionGroup dentro il file app.js.

All'interno del componente Home che avete creato, inserite il tag h2 dentro il tag ReactCSSTransitionGroup.

Usando il tag ReactCSSTransitionGroup avete definito la porzione in cui avrà luogo l'animazione. Avete specificato un nome per la transizione usando transitionName. Avete inoltre definito se apparirà la transizione e se dovrà entrare o meno.

Usando il nome della transizione definita all'interno di ReactCSSTransitionGroup, definirete le classi CSS che verranno eseguite a comparsa e in stato attivo. Aggiungete il seguente stile CSS alla pagina index.html.

Come avrete notato, dovete specificare la durata dell'animazione sia nel metodo render che nel CSS. Questo perché è il modo in cui React viene a sapere quando rimuovere le classi di animazione dall'elemento e quando rimuovere l'elemento dal DOM.

Salvate le modifiche soprastanti e aggiornate la pagina. Una volta che la pagina è caricata, nell'arco di pochi secondi dovreste vedere il testo animato.

Enter/Leave Animation

Per comprendere meglio l'animazione in entrata e uscita creeremo una piccola applicazione React. L'applicazione avrà un text box di input per inserire il nome. Vedrete come aggiungere l'animazione in entrata quando un nome viene aggiunto all'elenco.

All'interno di app.js create una nuova classe denominata App.

Inizializzate un elenco data e una variabile name nello stato iniziale del componente.

Nella sezione render del componente App inserite un text box di input per l'inserimento del nome e un pulsante per aggiungere il nome nell'elenco array.

Definite l'evento di input handleChange e l'evento add dentro il componente App.

L'evento handleChange imposta il valore del text box di input alla variabile name. Ecco come appare il metodo add:

Nel metodo add, il nome inserito e un ID univoco vengono inseriti nell'elenco array data.

Unite i metodi handleChange e add nel costruttore del componente App.

Visualizzerete i nomi inseriti dentro l'elenco. Modificate il codice HTML per aggiungere l'elenco.

Per animare gli oggetti appena aggiunti, aggiungeremo il tag ReactCSSTransitionGroup sugli elementi li.

Aggiungete il seguente stile di transizione CSS alla pagina index.html.

Di seguito il componente App completo:

Salvate e aggiornate la pagina. Inserite un nome e cliccate il pulsante add, e l'elemento verrà aggiunto all'elenco con l'animazione.

Similarmente, l'animazione in uscita può essere implementata nel codice soprastante. Una volta che è stata implementata la funzionalità delete nell'applicazione aggiungete la classe leave e leave-active in index.html. Impostate transitionLeave come True nel tag ReactCSSTransitionGroup nel metodo render, e dovreste essere a posto.

Riassumendo

In questo tutorial avete visto come iniziare ad usare animazioni in React. Avete creato una semplice applicazione React e visto come implementare l'animazione in entrata e uscita. Per informazioni dettagliate sulle animazioni in React, consigliamo di leggere la documentazione ufficiale.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Nel corso degli ultimi due anni, React è cresciuto in popolarità. Infatti, abbiamo un numero di elementi nel marketplace che sono disponibili per acquisto, revisione, implementazione e così via. Se state cercando risorse addizionali riguardo React, non esitate a controllare.

Fateci conoscere le vostre considerazioni nei commenti sottostanti. Controllate la nostra pagina da istruttore in Envato Tuts+ per ulteriori tutorials su React e relative tecnologie web.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.