Introduction aux Animations dans React

() translation by (you can also view the original English article)

Dans les deux derniers tutoriels de React, vous vous êtes familiarisé avec les concepts de base React comme JSX, le routage et les formulaires. Dans ce tutoriel, nous allons passer au niveau suivant et essayer de comprendre les animations dans React.

Mise en route

Créez un répertoire nommé ReactAnimations. Accédez au répertoire et lancez le projet en utilisant Node Package Manager ou npm.

1	mkdir ReactAnimations
2	cd ReactAnimations
3	npm init

Installer react et react-dom au projet.

1	npm install react react-dom --save

Nous allons utiliser webpack module bundler pour ce projet. Installez webpack et le serveur de développement webpack.

1	npm install webpack webpack-dev-server --save-dev

Installez le paquet babel pour convertir la syntaxe JSX en JavaScript dans notre projet.

1	npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

Créez un fichier de configuration requis par webpack-dev-server où nous allons définir le fichier d'entrée, le fichier de sortie et le chargeur babel. Voici comment ressemble webpack.config.js:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

Créez un fichier index.html dans lequel l'application sera rendue. Voici comment il ressemble:

<html>
    <head>
        <title>TutsPlus - React Animations</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

Créez un fichier nommé app.js. À l'intérieur de l'app.js importez les bibliothèques de react requises comme indiqué:

1	import React from 'react';
2	import {render} from 'react-dom';

Créez un composant apatride appelé Home qui rend une balise H1.

const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations!'}</h2>
    );
};

Rendez le composant Home à l'intérieur de l'élément app dans la page index.html. Voici comment app.js ressemble:

import React from 'react';
import {render} from 'react-dom';
 
const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    );
};
 
render(
    <Home />,
    document.getElementById('app')
);

Enregistrez les modifications ci-dessus et démarrez le serveur de webpack. Vous devriez avoir votre application en cours d'exécution à http://localhost:8080/index.html.

Animations dans React

React fournit un certain nombre d'utilitaires supplémentaires pour la création d'applications React. TransitionGroup et CSSTransitionGroup sont les API fournies pour l'animation.

De la documentation officielle,

Le composant ReactTransitionGroup add-on est une API de bas niveau pour l'animation et ReactCSSTransitionGroup est un composant complémentaire pour faciliter la mise en œuvre d'animations et de transitions CSS de base.

Apparaître des Animations

Commençons par essayer une animation simple dans React. Installez le react-addons-css-transition-group dans le projet.

1	npm install react-addons-css-transition-group --save

Importez ReactCSSTransitionGroup à l'intérieur du fichier app.js.

1	import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

Dans le composant Home que vous avez créé, enveloppez la balise h2 à l'intérieur de la balise ReactCSSTransitionGroup.

<div>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={true} transitionAppearTimeout={5000} transitionEnter={false} transitionLeave={false}>
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    </ReactCSSTransitionGroup>
</div>

À l'aide de la balise ReactCSSTransitionGroup, vous avez défini la partie où l'animation aurait lieu. Vous avez spécifié un nom pour la transition à l'aide de transitionName. Vous avez également défini si la transition devrait apparaître, entrer et quitter se produire ou non.

En utilisant le nom de transition défini à l'intérieur du ReactCSSTransitionGroup, vous définirez les classes CSS qui seraient exécutées lors de l'affichage et quand elles sont en état actif. Ajoutez le style CSS suivant à la page index.html.

.anim-appear {
  opacity: 0.01;
}

.anim-appear.anim-appear-active{
  opacity: 2;
  transition: opacity 5s ease-in;
}

Comme vous l'auriez remarqué, vous devez spécifier la durée de l'animation à la fois dans la méthode de rendu et dans CSS. C'est parce que c'est comme ça que React sait quand supprimer les classes d'animation de l'élément et quand supprimer l'élément du DOM.

Enregistrez les modifications ci-dessus et actualisez la page. Une fois la page chargée, en quelques secondes vous devriez pouvoir voir le texte animé.

Enter/Leave Animation

Pour obtenir une meilleure compréhension d'enter et leave d'animation, nous allons créer une petite application React. L'application aurait une zone de texte d'entrée pour entrer le nom. Vous verrez comment ajouter l'animation d'entrée lorsqu'un nom est ajouté à la liste.

À l'intérieur de app.js, créez une nouvelle classe appelée App.

1	class App extends React.Component {
2
3	}

Initialiser une liste de data et une variable de name dans l'état initial du composant.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      name:''
    };
  }
}

À l'intérieur de la partie de rendu du composant App, placez une zone de texte d'entrée pour entrer le nom et un bouton pour ajouter le nom à la liste de matrice.

1	<div>
2	Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
3	</div>

Définissez l'événement handleChange d'entrée et l'événement add dans le composant App.

1	handleChange(e){
2	this.setState({name:e.target.value})
3	}

L'événement handleChange définit la valeur de la zone de texte d'entrée à la variable de name. Voici comment ressemble la méthode add:

add(){
    var arr = this.state.data.slice();
    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
    this.setState({data:arr})
}

Dans la méthode add, le nom saisi et un identifiant unique sont envoyés à la liste des matrices de data.

Liez la méthode handleChange et add dans le constructeur du composant App.

constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      name:''
    };
}

Vous allez afficher les noms saisis dans une liste. Modifiez le code HTML de rendu pour ajouter la liste.

<ul>
{
    this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
    })
}
</ul>

Pour animer les éléments nouvellement ajoutés, nous ajouterons la balise ReactCSSTransitionGroup sur les éléments li.

<ul>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={5000} transitionEnter={true} transitionLeave={false}>
    {
      this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
      })
    }
    </ReactCSSTransitionGroup>
</ul>

Ajoutez le style de transition CSS suivant à la page index.html.

.anim-enter {
  opacity: 0.01;
}

.anim-enter.anim-enter-active {
  opacity: 2;
  transition: opacity 5s ease-in;
}

Voici la composante complète d'App:

class App extends React.Component {
  constructor(props) {
    super(props);
    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 (
      <div>
        Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
        
        <ul>
        <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={3000} transitionEnter={true} transitionLeave={false}>
        {
          this.state.data.map(function(player) {
             return <li key={player.id}>{player.name}</li>
          })
        }
        </ReactCSSTransitionGroup>
        </ul>
        
      </div>
    )
  }
}

Sauvegardez ce qui précède et actualisez la page. Entrez un nom et entrez le bouton add, et l'élément doit être ajouté à la liste avec animation.

De même, l'animation de leave peut également être implémentée dans le code ci-dessus. Une fois la fonctionnalité de suppression a été implémentée dans l'application, ajoutez la classe leave et leave-active à index.html. Définissez la transitionLeave sur True dans la balise ReactCSSTransitionGroup dans la méthode de rendu, et vous devriez être prêt à aller.

Finissons-en

Dans ce tutoriel, vous avez vu comment commencer à utiliser les animations dans React. Vous avez créé une application React simple et vous avez vu comment implémenter l'animation appear et enter. Pour des informations détaillées sur les animations dans React, je vous recommande de lire la documentation officielle.

Le code source de ce tutoriel est disponible sur GitHub.

Au cours des dernières années, React a gagné en popularité. En fait, nous avons un certain nombre d'articles sur le marché qui sont disponibles pour l'achat, l'examen, la mise en œuvre, et ainsi de suite. Si vous recherchez des ressources supplémentaires sur React, n'hésitez pas à les consulter.

Faites-nous savoir vos pensées dans les commentaires ci-dessous. Jetez un coup d'oeil à ma page d'instructeur Envato Tuts+ pour plus de tutoriels sur React et les technologies Web connexes.