So erzielen Sie einen Seitenwechseleffekt in React

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

, 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

2. Verwendung im Projekt:

   import AnimatedRouter from 'react-animated-router'; //我们的AnimatedRouter组件
   import 'react-animated-router/animate.css'; //引入默认的动画样式定义

Ersetzen Sie dann die Routing-Komponente Switch durch AnimatedRouter;

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

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

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!