React animated router dependency

file: https://www.npmjs.com/package/react-animated-router
Replace the direct routing component switch with the animated router

The red mark is wrong

In the process of development (TS), we always report an error after replacement, saying that there is no necessary attribute. After looking at the source code and adding the following attributes, we report no error (enter, exit, appearance)
< AnimatedRouter enter exit appear> ... </ AnimatedRouter>

Simply record how to improve the appearance animation style

Introduce a style (‘react-animated-router/animal. CSS’) which is copied from the installation package. If you want to modify it, it is left and right animation by default

// ------Page in/out animation start-------
.animated-router-container {
  height: 100%;
}
.animated-router-in-transition {
  /* page animation in progress */
  position: relative;
  width: 100%;
  overflow: hidden;
}
.animated-router-forward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-forward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-backward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-backward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-forward-enter-active,
.animated-router-forward-exit-active,
.animated-router-backward-enter-active,
.animated-router-backward-exit-active {
  /* Transition time and jogging effect required for different transition phases */
  transition: all 0.4s ease-in;
}
.animated-router-forward-exit,
.animated-router-backward-exit {
  position: absolute !important;
  width: 100%;
  top: 0;
  left: 0;
}
// ------Page in/out animation end-------

When a warning appears, try to install the following two plug-ins

npm install [email protected] --save
npm install –save-dev prop-types

Another component library comes out of animation – ant motion