So verwenden Sie Vue-Route, um die Übergangsanimation zum Umblättern der linken und rechten Seite automatisch zu bestimmen

Ich habe vor einiger Zeit ein mobiles Spa-Projekt erstellt. Die Technologie basiert auf: vue + vue-router + vuex + mint-ui

Da die Webpack-Vorlage von vue-cli scaffolding verwendet wird, werden alle Seiten verwendet sind in .vue Die Datei mit dem Suffix wird als Komponente verwendet

In letzter Zeit hat das Unternehmen relativ wenige Projekte und endlich Zeit, einige meiner kleinen Erfahrungen mit der Verwendung von Vue-Router aufzuzeichnen,

Allgemeine mobile Port-Einzelseitenanwendung Beim Springen zur Seite wird eine entsprechende Übergangsanimation angezeigt, z. B.:

　1 Die Übergangsanimation, die angezeigt werden muss, wenn von der aktuellen Seite gesprungen wird -Ebenenseite zur Seite der zweiten Ebene bedeutet, dass die Seite der ersten Ebene auf die linke Seite des Bildschirms verschoben wird. Gleichzeitig mit dem Verschwinden verschiebt sich

　 die sekundäre Seite von der rechts auf den linken Bildschirmrand und erscheint. (Ähnlich dem Effekt, wenn man ein Buch auf die nächste Seite umblättert)

2. Die Übergangsanimation, die angezeigt werden muss, wenn von der aktuellen Seite der zweiten Ebene zur ersten Seite zurückgesprungen wird. Die Seite der ersten Ebene verschiebt die Seite der zweiten Ebene nach rechts auf dem Bildschirm. Beim Verschwinden

wird die Seite der ersten Ebene angezeigt und bewegt sich von links nach rechts auf dem Bildschirm. Ähnlich wie (der Effekt, wenn man in einem Buch auf die vorherige Seite zurückblättert)

Es stellt sich jedoch die Frage: Wie lässt sich die hierarchische Beziehung zwischen der aktuellen Seite und der zu überspringenden Seite bestimmen?

Meine Lösung ist: Unterscheiden Sie beim Erstellen einer Seite (Komponente) die Komponenten, indem Sie das Attribut Pfad (Zugriffspfad) der Seite im Router festlegen Definitionsseite hierarchische Beziehung zwischen ihnen.

Zum Beispiel ist der Zugriffspfad einer Seite (Komponente) der ersten Ebene ‘A’ ‘/A’. Der Zugriffspfad seiner sekundären Seite 'B' ist '/A/B'　.

Bevor Sie dann zur Seite springen, müssen Sie nur die aktuelle vergleichen Seite und Die Pfadtiefe der Seite, zu der gesprungen werden soll, kann verwendet werden, um die Übergangsanimation dynamisch festzulegen.

Zum Beispiel stammen die Tiefe von '/A/B' > und die Tiefe von '/A' von B Wenn die Seite zur Seite A springt, sollte dies der Fall sein: Effekt 2: (Der Effekt, bei dem ein Buch zur vorherigen Seite zurückgeblättert wird). >1. Zuerst die übergeordnete Seite

home.vue:

 
  
 scoped

2. Zweitens hänge ich mein main.js-Fragment an (wird verwendet, um die Übergangsanimation dynamisch festzulegen, bevor zur Seite gesprungen wird)

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

　

main.js:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue-Route, um die Übergangsanimation zum Umblättern der linken und rechten Seite automatisch zu bestimmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!