Vue-router combiné avec la transition pour réaliser le partage d'exemples d'effet de commutation d'animation d'application

Cet article vous apporte principalement un exemple de Vue-router combiné avec une transition pour obtenir l'effet de commutation d'animation avant et arrière de l'application. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Configurez d'abord le routage et modifiez la configuration du routage

La configuration du routage n'est pas le but Ajoutez une méthode goBack à VueRoute pour enregistrer l'état avant et arrière de l'itinéraire.

this.isBack = true VueRouter.prototype.goBack = function () { 
　　this.isBack = true
　　window.history.go(-1)
}

2. Surveillez les changements d'itinéraire (lorsque l'itinéraire change, déterminez si l'état de l'itinéraire est en avant ou en arrière)

<template>
　　<p>

　　　　动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为 ：‘slide-left' 和 'slide-right'

　　　　<transition :name="transitionName"> 
　　　　　　<router-view class="Router"></router-view>
　　　　</transition>
　　</p>
</template>

<script>
export default {
　　data() {
　　　　return {
　　　　　　transitionName: 'slide-right' // 默认动态路由变化为slide-right
　　　　}
　　},
　　watch: {
　　　'$route' (to, from) {
　　　　let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
　　　　　　if(isBack) {
　　　　　　　　this.transitionName = 'slide-right'
　　　　　　} else {
　　　　　　 this.transitionName = 'slide-left'
　　　　　}
　　this.$router.isBack = false
　　}
　 }
　}
</script>

3. Ajoutez différents effets d'animation au animations avant et arrière, le code spécifique est le suivant :

<style>

.Router {
 position: absolute;
 width: 100%;
 transition: all .8s ease;
 top: 40px;
}

.slide-left-enter,
 .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
</style>

4. Lorsque l'itinéraire avance, suivez simplement la méthode normale

5. Lorsque l'itinéraire avance ; est en marche arrière, vous pouvez appeler la méthode goBack ;

Recommandations associées :

Comparaison complète des attributs liés à l'animation CSS3 transition, animation, transformation

Analyse d'exemples d'attributs de transition en CSS3

10 articles recommandés sur la transition

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!