


So implementieren Sie den Effekt des Vue-Routers, der die übergangsanimation zum Umbl?ttern der linken und rechten Seite automatisch beurteilt
Jan 25, 2018 am 11:47 AMIch habe vor einiger Zeit ein mobiles Spa-Projekt durchgeführt. Die Technologie basiert auf: vue + vue-router + vuex + mint-ui. Da die Webpack-Vorlage von vue-cli scaffolding verwendet wird, verwenden alle Seiten Dateien mit . Vue-Suffix als Komponente, dieser Artikel teilt Ihnen haupts?chlich die automatische Beurteilung der Animationseffekte beim Umbl?ttern von Seiten nach links und rechts mit. Ich hoffe, dass er Ihnen helfen kann.
Das Unternehmen hat in letzter Zeit relativ wenige Projekte und endlich habe ich Zeit, einige meiner kleinen Erfahrungen mit Vue-Router aufzuzeichnen.
Allgemeine Single-Page-Anwendungen für mobile Ports werden beim Springen einige Probleme haben Die entsprechende übergangsanimation, wie zum Beispiel:
1. Die übergangsanimation, die beim Springen von der aktuellen Seite der ersten Ebene zur Seite der zweiten Ebene angezeigt werden muss, ist, wenn die Seite der ersten Ebene verschoben wird auf der linken Seite des Bildschirms und verschwindet,
Sekund?rseiten werden angezeigt und bewegen sich von rechts nach links auf dem Bildschirm. (?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 Seite der ersten Ebene zurückgesprungen wird, ist, wenn die zweite Seite angezeigt wird Die Seite der ersten Ebene bewegt sich auf die rechte Seite des Bildschirms und verschwindet.
Die Seite der ersten Ebene 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: Legen Sie beim Erstellen einer Seite (Komponente) das Pfadattribut (Zugriffspfad) der Seite im Router fest, der die Seite definiert, um die hierarchische Beziehung zwischen Komponenten zu unterscheiden.
Zum Beispiel ist der Zugriffspfad einer Seite (Komponente) der ersten Ebene ?A“ ?/A“. Der Zugriffspfad seiner Sekund?rseite ?B“ ist ?/A/B“.
Bevor Sie dann zur Seite springen, müssen Sie nur noch die Pfadtiefe der aktuellen Seite und der Seite, zu der gesprungen werden soll, vergleichen übergangsanimation dynamisch einrichten.
Zum Beispiel ist die Tiefe von ?/A/B“ > die Tiefe von ?/A“, dann sollte das Springen von Seite B zu Seite A Effekt 2 sein: (der Effekt, ein Buch wieder in die Seite umzudrehen). vorherige Seite) .
Eins. Zuerst die übergeordnete Seite
home.vue:
<!-- keepAlList是用來(lái)動(dòng)態(tài)判斷組件是否需要keep-alive,建議保存到vuex中作為全局變量,至于下方的css動(dòng)畫(huà),看官可以按照喜好自由修改--> <transition :name="transNa"> ?<keep-alive :include="keepAlList"> ?<router-view class="child-view"></router-view> ?</keep-alive> </transition> <style scoped> .child-view?{ ?position:?absolute; ?width:?100%; ?height:?100%; ?transition:?all?.5s?ease; ?-webkit-transition:?all?.5s?ease; ?-moz-transition:?all?.5s?ease; } .rightin-enter, .leftin-leave-active?{ ?opacity:?0; ?transform:?translate3d(50%?0,?0); ?-webkit-transform:?translate3d(50%,?0,?0); ?-moz-transform:?translate3d(50%,?0,?0); } .leftin-enter, .rightin-leave-active?{ ?opacity:?0; ?transform:?translate3d(-50%?0,?0); ?-webkit-transform:?translate3d(-50%,?0,?0); ?-moz-transform:?translate3d(-50%,?0,?0); } </style>
2. Zweitens h?nge ich mein main.js-Fragment an (wird verwendet, um die übergangsanimation dynamisch festzulegen, bevor zur Seite gesprungen wird)
Main.js:
//進(jìn)入路由之前設(shè)置攔截器 let?noLoginList?=?["login",?"register",?"forget",?"home",?"classify",?"goodsDetial"]; router.routeInfo.beforeEach((to,?from,?next)?=>?{ ?let?user?=?sessionStorage.getItem('user'); ?//如果要去登錄頁(yè)面 ?if?(noLoginList.indexOf(to.name)?>=?0)?{ ??if?(!user?||?user?==?'')?{ ???//未登錄的狀態(tài)通行 ???next(); ???return; ??}?else?{ ???if?(["login",?"register",?"forget"].indexOf(to.name)?>=?0)?{ ????//已登錄的狀態(tài)去首頁(yè) ????next({ ?????name:?'home' ????}); ????return; ???}?else?{ ????//已登錄的狀態(tài)去首頁(yè) ????next(); ????return; ???} ??} ?}?else?{ ??//去登錄頁(yè)面以外的頁(yè)面(以下是本文關(guān)鍵代碼) ??if?(user?&&?user?!=?'')?{ ???//判斷是否為需要緩存組件,如果是添加組件名到數(shù)組 ???if?(to.meta.keepAlive)?{ ????const?toName?=?to.name; ????let?keepLi?=?store.getters.getKeepAlList; ????keepLi.indexOf(toName)?< 0 ? keepLi.push(toName) : ''; store.commit('SET_KEEPALLIST', keepLi); } //根據(jù)路徑名深度設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)類(lèi)型 store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin')); next(); } else { let toWhere = router.nameList.indexOf(to.name) >=?0???to?:?{name:?'home'}; ???next({ ????name:?'login', ????params:?{ ?????jumpTo:?{ ??????name:?toWhere.name, ??????params:?toWhere.params, ??????query:?toWhere.query, ?????}, ????} ???}); ??} ?} });
Verwandte Empfehlungen:
jquery implementiert die Umbl?ttereffekte auf der linken und rechten Seite der Tastatur_jquery
ausführliche Erkl?rung des Vue-Routers, der jquery und params zum übergeben von Parametern verwendet
vue Router-Routing-Parameter L?sung zum Aktualisieren des verschwindenden Problems
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Effekt des Vue-Routers, der die übergangsanimation zum Umbl?ttern der linken und rechten Seite automatisch beurteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

L steht für links, wird am linken Ohr getragen, und R steht für rechts, wird am rechten Ohr getragen. Analyse 1 Normalerweise befinden sich auf den Ohrh?rern Logos, die mit L und R abgekürzt werden. L steht für links und wird am linken Ohr getragen. Die mit R und L gekennzeichneten spezifischen Positionen sind nicht festgelegt und basieren auf den jeweiligen Kopfh?rern. Bei einigen Kopfh?rern ist ein R rot markiert. Bei Kopfh?rern, die mit einem Mobiltelefon geliefert werden, befindet sich die Seite mit Mikrofon und Tasten normalerweise auf der rechten Seite. Erg?nzung: Arten von Kopfh?rern 1 Kopfh?rer sind ein Symbol für tragbares Audio der Menschen. Kopfh?rer k?nnen in zwei Spezifikationen unterteilt werden: OMTP-Spezifikationen werden im Allgemeinen als nationale Standards bezeichnet, und CTIA werden im Allgemeinen als internationale Standards bezeichnet. Kopfh?rer werden nach ihren Energieumwandlungsmethoden klassifiziert, insbesondere: dynamische Spulenmethode, Dreheisenmethode, statische Methode

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularit?t von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-?kosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, ben?tigen wir

Der Stromverbrauch von RX588 betr?gt etwa 250 W. Das Ansehen von Filmen auf dem RX580 verbraucht Strom, aber nicht viel. Für die Dekodierung vieler Videos ist Hardware erforderlich. Eine Grafikkarte wird mehr oder weniger verwendet. Der Plattform-Stromverbrauch der Einzelkarte xfx Crimson und Dylan Demon + 7700K betr?gt etwa 380 W, 7700 K werden als 100 W gez?hlt, und andere Ger?te zusammen erreichen bis zu 30 W, d. h. der Stromverbrauch von rx588 betr?gt etwa 250 W und der Stromverbrauch von Die Dual-Card-Maschine hat eine Leistung von 630 W bis 650 W, mehr als 700 W ist ausreichend, aber zu diesem Zeitpunkt ist die Belastung des Netzteils zu hoch, was sich auf die Lebensdauer auswirkt. Berechnet auf der Grundlage der Belastung betr?gt die ideale Leistung 60 % bis 80 % Die Nennleistung des Netzteils betr?gt 850 bis 1000 W. Dies h?ngt davon ab, welche CPU verwendet wird und ob sie übertaktet ist. Unterstützt das H61-Motherboard die 588-Grafikkarte selbst?

Word ist eine der am h?ufigsten verwendeten Office-Software. Wenn der bearbeitete Textinhalt lang und schwer lesbar ist, k?nnen Sie Seiten in Word umbl?ttern. Unten wird der Herausgeber mit meinen Freunden eine einfache Anleitung zum Umbl?ttern von Seiten in Word teilen! Ich hoffe, das hilft euch! 1. Zun?chst ?ffnen wir das mehrseitige Word-Dokument in einer Word-Software auf dem Computer. Wie im Bild unten gezeigt: 2. Klicken Sie auf den Aufw?rtspfeil in der Bildlaufleiste der Word-Benutzeroberfl?che, um nach oben zu scrollen und Seiten umzubl?ttern. Wie im Bild unten gezeigt: 3. Wenn Sie nach unten bl?ttern müssen, klicken Sie auf den Abw?rtspfeil der Bildlaufleiste. Wie im Bild unten gezeigt: 4. Klicken Sie auf den Pfeil der Bildlaufleiste, um Seiten umzubl?ttern. Wir müssen schnell umbl?ttern, indem wir mit der rechten Maustaste auf die Bildlaufleiste klicken. wie folgt

VueRouter ist ein Routenverwaltungs-Plug-in, das offiziell von Vue.js bereitgestellt wird. Es kann uns bei der Implementierung von Seitennavigation und Routenumschaltung in Vue-Anwendungen helfen. Die Lazy-Loading-Funktion ist ein einzigartiger Vorteil von VueRouter, der die Seitenleistung erheblich optimieren kann. In diesem Artikel stellen wir die Lazy-Loading-Routing-Funktion von VueRouter vor und stellen einige praktische Codebeispiele zur Optimierung der Seitenleistung bereit. Lazy-Loading bedeutet bei Bedarf

L?sung, um darauf zu reagieren, dass der Router nicht angezeigt wird: 1. BrowserRouter zur übergeordneten Routing-Komponente hinzufügen, um den Router zu umschlie?en. 2. Verwenden Sie ?this.props.history.go()“, um die Komponente zu aktualisieren. 3. Fügen Sie ?forcerefresh“ zum Browserrouter-Parameter hinzu ={true}“; 4. Schreiben Sie eine Hook-Funktion in ?<Route>“ und rufen Sie sie auf, wenn Sie diese Route verlassen oder betreten.

So verwenden Sie Router zum Implementieren der Umleitungsfunktion in einem Vue-Projekt. In einem Vue-Projekt müssen wir h?ufig Sprung- und Umleitungsfunktionen zwischen Seiten implementieren. VueRouter bietet eine einfache, aber leistungsstarke L?sung. In diesem Artikel wird erl?utert, wie Sie mit Router die Umleitungsfunktion in einem Vue-Projekt implementieren, und es werden spezifische Codebeispiele aufgeführt. VueRouter installieren Zuerst müssen wir VueRouter im Vue-Projekt installieren. Kann

VueRouter ist der offizielle Routing-Manager im Vue.js-Framework. Es erm?glicht Entwicklern, Seiteninhalte durch Routenzuordnung zu wechseln, wodurch Einzelseitenanwendungen besser kontrollierbar und einfacher zu warten sind. Wenn Anwendungen jedoch komplexer werden, kann das Laden und Parsen von Routen zu einem Leistungsengpass werden. Um dieses Problem zu l?sen, bietet VueRouter eine Funktion zum verz?gerten Laden von Routen, die das Laden von Routen verz?gert, bis es tats?chlich ben?tigt wird. Lazy-Loading ist eine Ladetechnologie, die
