Vue-Router kombiniert mit Übergang, um Beispiel-Sharing für App-Animationswechseleffekte zu realisieren

Dieser Artikel enthält hauptsächlich ein Beispiel für einen Vue-Router in Kombination mit einem Übergang, um den Vorwärts- und Rückwärts-Animationswechseleffekt der App zu erzielen. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Konfigurieren Sie zunächst das Routing und ändern Sie die Routing-Konfiguration.

Die Routing-Konfiguration ist nicht der Punkt. Fügen Sie eine goBack-Methode zu VueRoute hinzu, um den Vorwärts- und Rückwärtsstatus der Route aufzuzeichnen

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

2. Überwachen Sie Routenänderungen (wenn sich die Route ändert, bestimmen Sie, ob der Routenstatus vorwärts oder rückwärts ist)

<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. Fügen Sie verschiedene Animationseffekte hinzu Vorwärts- und Rückwärtsanimationen. Der spezifische Code lautet wie folgt:

<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>

Viertens: Wenn sich die Route vorwärts bewegt, befolgen Sie einfach die normale Methode bewegt sich rückwärts, es ist in Ordnung, die goBack-Methode aufzurufen;

Umfassender Vergleich der CSS3-Animationsattribute Übergang, Animation, Transformation

Instanzanalyse des Übergangsattributs in CSS3

10 empfohlene Artikel zum Thema Übergang

Das obige ist der detaillierte Inhalt vonVue-Router kombiniert mit Übergang, um Beispiel-Sharing für App-Animationswechseleffekte zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!