How to achieve page switching effect in react

The content of this article is about how to achieve the effect of page switching in react. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Summary of the previous situation

Note: (The route I use is react-router4)
As shown in the figure below, we need to have a transition effect when switching pages, so that It will not make page switching appear stiff, and the user experience will be greatly improved;

but the problem is that react’s routing animation is not as convenient as vue. Just write a few styles in vue. Done, in react, you still need to install plug-ins;
So I looked for some methods on the Internet, such as react-addons-css-transition-group, etc., and I had to install plug-ins and change the routing structure. What kind of vuex do I need to do, and do I need to determine when to enter the animation...
I tried about two methods, but I don’t know why they didn’t work...Autumn has arrived unknowingly, and the cold wind gusts array, I couldn’t help but think of vue...but I couldn’t look back;

2. A sudden turn of events

At this moment, I found a plug-in in an article:

Link: Use react-router v4 and react-transition-group to achieve page routing switching animation effect

This is the parent component that the author has encapsulated after solving the bug of animated-transitions
So I plan to let it go Give it a try

三.千亿动

It is very simple to use, divided into two steps
1. Installation:

  npm install react-animated-router --save

2. Use in the project:

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

Then replace the routing component Switch with AnimatedRouter;
After completing these two steps according to the component author's article, an error is reported:

4. Breaking the boat

It’s a long story with twists and turns, and finally I found out that I need to install two more plug-ins:

    npm install react-transition-group@2.3.0 --save
   npm install –save-dev prop-types

Then, the page can run normally The error is no longer reported, and the page switching effect is also available; thanks to the author of the component
What needs to be added is that the style file for animation switching is in node_modulesreact-animated-routeranimate.css. You can directly modify the animation effect according to your needs.
Or it may be better to copy it, modify it and then quote it;

Recommended related articles:

React-Native Mobx Implementation Mall APP

React Native implements the verification code countdown function

activity switching animation and page switching animation_html/css_WEB-ITnose

HTML5 single page gesture sliding screen switching how to achieve

The above is the detailed content of How to achieve page switching effect in react. For more information, please follow other related articles on the PHP Chinese website!