Comment utiliser vue-route pour déterminer automatiquement l'animation de transition de rotation de page gauche et droite

J'ai réalisé un projet de spa mobile il y a quelque temps. La technologie est basée sur : vue + vue-router + vuex + mint-ui

Parce que le modèle webpack de l'échafaudage vue-cli est utilisé, toutes les pages. sont en .vue Le fichier avec le suffixe est utilisé comme composant

Récemment, l'entreprise a relativement peu de projets et a enfin le temps d'enregistrer une partie de ma petite expérience dans l'utilisation de vue-router,

Application générale sur une seule page du port mobile Il y aura une animation de transition correspondante lors du passage à la page, telle que :

　1 L'animation de transition qui doit être affichée lors du saut à partir de la première page actuelle. -level page vers la page de deuxième niveau est que la page de premier niveau se déplace vers le côté gauche de l'écran. En même temps qu'elle disparaît,

　 la page secondaire se déplace du à droite de l'écran et apparaît. (Semblable à l'effet de tourner un livre vers la page suivante)

2. L'animation de transition qui doit être affichée lors du passage de la page actuelle de deuxième niveau au premier- La page de niveau consiste à déplacer la page de deuxième niveau vers la droite de l'écran. En disparaissant,

La page de premier niveau apparaît en se déplaçant de la gauche vers la droite de l'écran. Semblable à (l'effet de retourner un livre à la page précédente)

Mais une question se pose : Comment déterminer la relation hiérarchique entre la page en cours et la page à sauter ?

Ma solution est la suivante : lors de la création d'une page (composant), distinguer les composants en définissant l'attribut path (chemin d'accès) de la page dans le routeur du page de définition relation hiérarchique entre eux.

Par exemple, le chemin d'accès d'une page (composant) de premier niveau 'A' est '/A'. Le chemin d'accès de sa page secondaire 'B' est '/A/B'　.

Ensuite, avant de passer à la page, il vous suffit de comparer la page actuelle page et la profondeur du chemin de la page vers laquelle accéder peuvent être utilisées pour définir dynamiquement l'animation de transition.

Par exemple, la profondeur de '/A/B' > et la profondeur de '/A' sont de B Lorsque la page passe à la page A, cela devrait être Effet 2 : (L'effet de retourner un livre à la page précédente

1. D'abord la page parent

home.vue :

 
  
 scoped

.child-view {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
}

<em><em><em>.rightin-enter,<br/>.leftin-leave-active {<br/> opacity: 0;<br/> transform: translate3d(50% 0, 0);<br/> -webkit-transform: translate3d(50%, 0, 0);<br/> -moz-transform: translate3d(50%, 0, 0);<br/>}<br/><br/>.leftin-enter,<br/>.rightin-leave-active {<br/> opacity: 0;<br/> transform: translate3d(-50% 0, 0);<br/> -webkit-transform: translate3d(-50%, 0, 0);<br/> -moz-transform: translate3d(-50%, 0, 0);<br/>}<br/><br/><span style="color: #0000ff;"></style></span></em></em></em>

2. Deuxièmement, je joins mon fragment main.js (utilisé pour définir dynamiquement l'animation de transition avant de passer à la page)

　

main.js :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!