Fonctions de rendu et transitions Vue.js (traduit par Hajime Yamasaki Vukelic)

Bonjour, Habr! J'ai décidé de commencer mon activité en traduisant des articles en russe, ce dont j'ai moi-même grandement bénéficié. J'espère que vous serez utile. Je note que j'ai essayé de traduire littéraire, pas mot pour mot.


Tout d’abord, j’introduis une traduction de l’article «Vue.js render fonctions and transitions» de Hajime Yamasaki Vukelic.

Fonctions et transitions de rendu Vue.js

La documentation de Vue.js concernant les fonctions de rendu est pauvre. Pour les utilisateurs qui utilisent JSX avec des fonctions de rendu, cela peut créer des problèmes. Dans cet article, nous verrons comment créer des transitions dans ce scénario particulier.

J'utilise JSX dans les exemples, mais tout cela fonctionne avec de simples fonctions de rendu JavaScript, car JSX n'est qu'un sucre syntaxique pour les appels h (). Si vous souhaitez en savoir plus sur ce sujet, consultez cet article .

Fonctionnement des transitions en général

L'essence des transitions est que vous disposez d'un composant de transition intégré qui attribue des classes aux éléments montés (entrée) ou démontés (sortie).

Danse Pikabu

La nuance principale: comment déterminer le lieu d'installation ou de démontage des éléments. Ce problème peut être résolu de plusieurs manières.

Vous pouvez utiliser l'opérateur ternaire pour implémenter l'apparition / disparition d'un élément:

render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> } 

ou pour remplacer un article par un autre:

 render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> } 

Non, je plaisantais. Bien sûr, vous ne pouvez pas utiliser l'opérateur ternaire sans paramètres supplémentaires pour remplacer de tels éléments. Cependant, il y a une nuance. L'algorithme de comparaison décide qu'il y a déjà un élément, donc au lieu de le supprimer du DOM, il le corrige juste pour qu'il ressemble à un autre élément.

Ce sera mieux si vous utilisez la clé lors du remplacement des éléments:

 render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> } 

S'il y a une clé, deux éléments changent complètement (l'ancien est démonté et le nouveau est monté à sa place), tandis que les clés sont différentes.

De même, si vous souhaitez échanger un composant ou un élément d'un autre du même composant / élément:

 render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> } 

Dans l'exemple ci-dessus, la méthode this.subcomponentKey va en quelque sorte calculer la clé correspondante pour le composant MyComponent.

Différences clés

Lorsque nous parlons de clés, n'oubliez pas que les éléments / composants sont toujours affichés complètement lorsque la clé est modifiée. En revanche, tant que la clé reste la même, les éléments / composants ne changent pas.

Ne laissez pas cela vous surprendre. Avant d'ajouter accidentellement une clé à presque tout ce qui bouge (ou devrait bouger), réfléchissez soigneusement à la valeur de cette clé. Vérifiez d'abord sans clé, notez les résultats, puis ajoutez la clé et voyez si vous pouvez répéter le même effet. Si l'interface utilisateur n'est pas mise à jour, vous avez probablement sélectionné la mauvaise valeur de clé.

Ajout d'animation

Maintenant que nous savons comment faire disparaître et revenir nos éléments, il est temps de travailler sur l'animation.

Dans le cas le plus simple, nous avons deux classes. Une classe est toujours appliquée et l'autre est appliquée lorsqu'un élément / composant est assemblé ou démonté.

 // my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); } 

Ajoutez maintenant ces classes au code:

 render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> } 

Ces classes (enter-class et Leave-to-clas) sont bien décrites dans la documentation . Lisez à leur sujet là-bas.

La classe enter sert de référentiel pour les styles qui s'appliquent immédiatement après le montage d'un élément. Immédiatement après cela, la classe est supprimée. Nous ajoutons des transitions pour créer une animation entre le moment où la classe enter est utilisée et le moment où elle n'est pas là (lorsque seule la classe .base est utilisée).

La classe d'abandon de classe est appliquée immédiatement avant la suppression d'un élément. Vue.js attend ensuite la fin de l'animation, puis supprime l'élément de l'arborescence DOM. Encore une fois, nous utilisons des transitions pour créer des animations.

Dans notre exemple, nous avons utilisé la même classe .out pour entrer et sortir, mais nous pouvons utiliser des classes différentes pour deux événements.

Conclusion

J'espère que vous comprenez maintenant les concepts clés des transitions Vue.js lorsqu'ils sont utilisés dans les fonctions de rendu et avec JSX. Cependant, les transitions Vue.js offrent beaucoup plus de fonctionnalités, telles que la possibilité de se connecter à des événements de transition à l'aide de JavaScript et, par conséquent, de faire certaines choses non liées à l'animation (un peu comme les pièges du cycle de vie). Je terminerai l'article ici et laisserai les expériences à mes chers lecteurs.

Bon piratage!