Share
Dans les deux derniers didacticiels de React, vous vous êtes familiarisé avec les concepts de base de React, tels que JSX, le routage et les formulaires. Dans ce tutoriel, nous allons passer au niveau suivant et essayer de comprendre les animations dans React.
Créez un répertoire appelé ReactAnimations. Accédez au répertoire et lancez le projet à l'aide de Node Package Manager ou de npm.
mkdir ReactAnimations cd ReactAnimations npm init
Installer réagir et réact-dom au projet.
npm installer réagir réagir-dom --save
Nous allons utiliser Webpack module de module pour ce projet. Installer Webpack et serveur de développement webpack.
npm installer webpack webpack-dev-serveur --save-dev
Installez le babel paquet à convertir JSX syntaxe JavaScript dans notre projet.
npm installer --save-dev babel-core babel-loader babel-preset-réagir babel-preset-es2015
Créer un fichier de configuration requis par webpack-dev-server où nous définirons le fichier d’entrée, le fichier de sortie et le chargeur babel. Voici comment webpack.config.js regards:
module.exports = entrée: './app.js', module: chargeurs: [exclure: / noeud_modules / /: chargeur: 'babel-loader? presets [] = es2015 & presets [] = react'], sortie : nom du fichier: 'bundle.js';
Créé un index.html fichier où l'application sera rendue. Voici à quoi ça ressemble:
TutsPlus - Réagir Animations
Créez un fichier appelé app.js. À l'intérieur app.js importer les bibliothèques de réactions requises comme indiqué:
importer Réagir de 'réagir'; importer render de 'react-dom';
Créez un composant sans état appelé Accueil qui rend un H1 étiquette.
const Home = () => return ('TutsPlus - Bienvenue dans React Animations!'
) ;
Rendez le composant Accueil dans l'élément de l'application dans le index.html page. Voici comment app.js regards:
importer Réagir de 'réagir'; importer render de 'react-dom'; const Home = () => return ('TutsPlus - Bienvenue dans React Animations'
) ; rendre(, document.getElementById ('app'));
Enregistrez les modifications ci-dessus et lancez la Webpack serveur. Votre application doit être exécutée à l'adresse http: // localhost: 8080 / index.html..
React fournit un certain nombre d'utilitaires complémentaires pour la création d'applications React.. Groupe de transition et CSSTransitionGroup sont les API fournies pour l'animation.
De la documentation officielle,
leReactTransitionGroupcomposant complémentaire est une API de bas niveau pour l'animation, etReactCSSTransitionGroupest un composant complémentaire permettant d'implémenter facilement les animations et transitions CSS de base.
Commençons par essayer une animation simple dans React. Installez le réact-addons-css-transition-group au projet.
npm installer react-addons-css-transition-group --save
Importation ReactCSSTransitionGroup à l'intérieur de app.js fichier.
importer ReactCSSTransitionGroup à partir de 'react-addons-css-transition-group'
À l'intérieur de Accueil composant que vous avez créé, envelopper le h2 étiquette à l'intérieur du ReactCSSTransitionGroup étiquette.
'TutsPlus - Bienvenue dans React Animations'
En utilisant le ReactCSSTransitionGroup tag, vous avez défini la partie où l'animation aurait lieu. Vous avez spécifié un nom pour la transition à l'aide de nom de transition. Vous avez également défini si la transition apparaît, entre et quitte doit se produire ou non.
En utilisant le nom de transition défini à l'intérieur du ReactCSSTransitionGroup, vous allez définir les classes CSS sur lesquelles seront exécutées apparaissent et dans l'état actif. Ajoutez le style CSS suivant au index.html page.
.anim-apparaissent opacité: 0.01; .anim-semble.anim-semble-actif opacité: 2; transition: opacité 5s facilité;
Comme vous l'avez remarqué, vous devez spécifier la durée de l'animation à la fois dans la méthode de rendu et dans le 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, vous devriez voir le texte animé dans quelques secondes..
Pour mieux comprendre l'animation d'entrée et de sortie, nous allons créer une petite application React. L'application aurait une zone de saisie pour saisir le nom. Vous verrez comment ajouter l'animation d'entrée lorsqu'un nom est ajouté à la liste..
À l'intérieur app.js, créer une nouvelle classe appelée App.
la classe App étend React.Component
Initialiser un Les données liste et un prénom variable à l'intérieur de l'état initial du composant.
classe App étend React.Component constructeur (props) super (props); this.state = data: [], name: ";
Dans la partie de rendu du composant App, placez une zone de texte de saisie pour saisir le nom et un bouton pour ajouter le nom à la liste de tableaux..
Entrez le nom
Définir l'entrée handleChange événement et le ajouter événement à l'intérieur du composant App.
handleChange (e) this.setState (name: e.target.value)
le handleChange event définit la valeur de la zone de texte de saisie sur prénom variable. Voici à quoi ressemble la méthode add:
Accentsconagua
add () var arr = this.state.data.slice (); arr.push ('id' :( new Date ()). getTime (), 'name': this.state.name) this.setState (data: arr)À l'intérieur de ajouter méthode, le nom saisi et un identifiant unique sont poussés vers le Les données liste de tableau.
Lier le handleChange et ajouter méthode dans le constructeur du composant App.
constructeur (accessoires) super (accessoires); this.add = this.add.bind (this); this.handleChange = this.handleChange.bind (this); this.state = data: [], name: ";
Vous allez afficher les noms entrés dans une liste. Modifier le code HTML de rendu pour ajouter la liste.
Pour animer les éléments nouvellement ajoutés, nous ajouterons le ReactCSSTransitionGroup balise sur la li éléments.
Ajouter ce qui suit CSS style de transition à la index.html page.
.anim-enter opacity: 0.01; .anim-enter.anim-enter-active opacité: 2; transition: opacité 5s facilité;
Voici le composant complet de l'application:
classe App étend React.Component constructeur (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' :( nouvelle Date ()). getTime (), 'name': this.state.name) this.setState (data: arr) handleChange (e) this.setState (name: e.target.value) render () return ( Entrez le nom this.state.data.map (function (player) retour - nom de joueur
)
)Enregistrez ce qui précède et actualisez la page. Entrez un nom et entrez le bouton Ajouter. L'élément doit être ajouté à la liste avec animation..
De même, l'animation de congé peut également être implémentée dans le code ci-dessus. Une fois que la fonctionnalité de suppression a été implémentée dans l’application, ajoutez le laisser et laisser actif classe à la index.html. Met le transitionleave à Vrai dans le ReactCSSTransitionGroup balise dans la méthode de rendu, et vous devriez être prêt à aller.
Dans ce tutoriel, vous avez vu comment commencer à utiliser des animations dans React. Vous avez créé une application React simple et avez vu comment implémenter l'apparence et entrer dans l'animation. 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 deux dernières années, la popularité de React a augmenté. En fait, nous avons sur le marché un certain nombre d’articles pouvant être achetés, examinés, mis en œuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..
Faites-nous savoir vos pensées dans les commentaires ci-dessous. Consultez ma page d’instructeur Envato Tuts + pour plus de didacticiels sur React et les technologies Web associées..
