Detailed explanation of the implementation process of React routing animation switching

1. Download

cnpm install react-transition-group --save

2. Configuration

Import animation components under routing configuration file /src/file

Introduced

import {TransitionGroup, CSSTransition} from 'react-transition-group'

In the routing component template, wrap the routing component with an animation component

<TransitionGroup>
                <CSSTransition timeout={3000} classNames="dg" unmountOnExit key={}>
                    <Switch location={}>
                        <Route path="/" exact component={Login}/>
                        <Route path="/child1" exact component={Home}/>
                        <Route path="/child2" exact component={My}/>
                    </Switch>
                </CSSTransition>
</TransitionGroup>

Using animation writing method CSSTransition requires setting three properties:

• in: Controls the hidden conditions for child elements to display, usually bool values ​​or expressions
• timeout: The time to enter or exit animation, default milliseconds
• className: Prefix of entry or exit class attribute name

Note: The key attribute value of the CSSTransition component must be unique, so use

The Switch component must set the location attribute as routing information to ensure that the key of the routing jump component and the key of the CSSTransition are consistent.

If there is no in the route, you need to import withRouter

import { withRouter } from 'react-router-dom'
export default withRouter(App);

3.Introduce css

The process of writing route switching animations in components

/* Admission animation process */
.dg-enter{
    transform: translateX(200px)
  }
  .dg-enter-active{
    transition: 2s;
    transform: translateX(0px)
  }
  .dg-enter-done{
    transform: translateX(0px)
  }
  /* Appearance animation process */
  .dg-exit{
    transform: translateX(0px)
  }
  .dg-exit-active{
    transition: 2s;
    transform: translateX(200px)
  }
  .dg-exit-done{
    transform: translateX(200px)
  }

Introduce css file

import './'

Such a simple React routing animation switch is achieved

4. Combined with the animate library

We can define classNames by ourselves and then use css3 to set the animation, or combine the animate library to set its animation effect

download

npm install --save

Introduced

import '';

//Customized class name (define animation effect, before entering the field, until the end, before the end, after the end)classNames={{
    enter: "animate__animated",
    enterActive: "animate__fadeIn",
    exit: "animate__animated",
    exitActive: "animate__fadeOut",
}}

For specific details, we can refer to the animate official website: | A cross-browser library of CSS animations.

This is the end of this article about the detailed explanation of the implementation process of React routing animation switching. For more related React routing animation switching content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!