Heim > Web-Frontend > js-Tutorial > So erzielen Sie einen Seitenwechseleffekt in React

So erzielen Sie einen Seitenwechseleffekt in React

不言
Freigeben: 2018-08-14 15:38:31
Original
4551 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Erzielung des Effekts des Seitenwechsels in React. Ich hoffe, dass er für Freunde in Not hilfreich ist.

1. Überblick über die vorherige Situation

Hinweis: (Die Route, die ich verwende, ist React-Router4)
Wie in der Abbildung unten gezeigt, müssen wir beim Umschalten einen Übergangseffekt haben Seiten, sodass der Seitenwechsel nicht steif erscheint und die Benutzererfahrung erheblich verbessert wird
So erzielen Sie einen Seitenwechseleffekt in React
, aber das Problem ist, dass die Routing-Animation von React nicht so praktisch ist wie vue. Schreiben Sie einfach ein paar Stile in vue. In React müssen Sie noch Plug-Ins installieren ., und ich musste Plug-Ins installieren und die Routing-Struktur ändern. Welche Art von Vuex muss ich ausführen und muss ich bestimmen, wann die Animation eingegeben werden soll ...
Ich habe ungefähr zwei Methoden ausprobiert: aber ich weiß nicht, warum sie nicht funktioniert haben ... Der Herbst ist gekommen, ohne dass ich es gemerkt habe, und der kalte Wind weht, ich konnte nicht anders, als an vue zu denken. Aber ich konnte nicht zurückblicken;

2. Eine plötzliche Wendung der Ereignisse

In diesem Moment habe ich ein Plug-in in einem Artikel gefunden:

Link: React-Router v4 und React-Transition verwenden -group, um einen Animationseffekt zum Umschalten der Seitenweiterleitung zu erzielen
Dies ist die übergeordnete Komponente, die der Autor gekapselt hat, nachdem er den Fehler bei animierten Übergängen behoben hat

Also habe ich vor, es loszulassen. Probieren Sie es aus

3. Qiankun Yi Throw

Es ist sehr einfach zu verwenden, unterteilt in zwei Schritte

1. Installation:

  npm install react-animated-router --save
Nach dem Login kopieren
2. Verwendung im Projekt:

   import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
   import 'react-animated-router/animate.css'; //引入默认的动画样式定义
Nach dem Login kopieren
Ersetzen Sie dann die Routing-Komponente Switch durch AnimatedRouter;

Nach Abschluss dieser beiden Schritte gemäß dem Artikel des Komponentenautors wird ein Fehler gemeldet:

So erzielen Sie einen Seitenwechseleffekt in React

4. Das Boot kaputt machen

Es ist eine lange Geschichte mit Wendungen. Am Ende habe ich herausgefunden, dass ich zwei weitere Plug-Ins installieren muss:

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types
Nach dem Login kopieren
Dann Die Seite kann nicht mehr normal ausgeführt werden und der Seitenwechseleffekt ist dank des Autors der Komponente ebenfalls verfügbar. Es sollte hinzugefügt werden, dass sich die Stildatei für den Animationswechsel in node_modulesreact-animated-routeranimate befindet .css. Sie können den Animationseffekt direkt an Ihre Bedürfnisse anpassen.

Oder es ist möglicherweise besser, es zu kopieren, zu ändern und dann zu zitieren.

Empfohlene verwandte Artikel:

React-Native+Mobx implementiert Mall-APP


React Native implementiert die Countdown-Funktion für den Bestätigungscode

Aktivitätswechselanimation und Seitenwechselanimation_html/css_WEB-ITnose


So implementieren Sie die Gesten-Schiebebildschirmumschaltung in einer HTML5-Einzelseite

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Seitenwechseleffekt in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage