reactjs - React Router: How to animate separate parts of page on page transition

Question

Using react router and react transition group, I want to be able to control the animation of individual parts of a page when transitioning from one page to another. To illustrate my request, here is a full example of what I want to happen.

Say I have 2 pages, page A and page B. Page A has two subsections, S1 and S2. When I navigate from Page A to Page B, I know I can fade Page A out and fade page B in, as explained in this too limited example: https://reactrouter.com/web/example/animated-transitions. What I want is to be able to control the individual exit animations of S1 and S2 when I am transitioning from page A to page B. So for example, when I switch from page A to page B, I'd like S1 to slide up and for S2 to fade away. Can I achieve this effect using React Router and React Transition Group? Below the page diagram, I post some code that is my initial attempt at the solution.

               Page A
|-----------------------------------|
|                                   |
|        S1                 S2      |
|   |-----------|     |-----------| |
|   |           |     |           | |
|   |           |     |           | |
|   |           |     |           | |
|   |           |     |           | |
|   |           |     |           | |
|   |-----------|     |-----------| |
|                                   |
|                                   |
|-----------------------------------|

               Page B
|-----------------------------------|
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|-----------------------------------|

Main.js

import React from 'react'
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import PageA from './PageA.js'
import PageB from './PageB.js/'

class Main extends React.Component {
    render() { 
        return (
        <BrowserRouter>
             <CSSTransition key = {location.key}>
             <Switch key = {location}>
                   <Route path = "/pageA">
                        <PageA />
                   </Route>
                   <Route path = "/pageB">
                           <PageB />
                   </Route>
             </Switch>
             </CSSTransition>
        <BrowserRouter>
);
   }


}

PageA.js

import React from 'react'
class PageA extends React.Component
{
     render() {
         return (<div>
            <S1 />
            <S2 />
         </div>);
      }
}
export default PageA;

S1.js

import React from 'react'

class S1 extends React.Component {
     render() {
            return (<div><p>S1</p></div>);
      }

}
export default as S1;

S2.js

import React from 'react'

class S2 extends React.Component {
     render() {
            return (<div><p>S2</p></div>);
      }

}
export default as S2;

PageB.js

import React from 'react'
class PageB extends React.Component
{
     render() {
         return (<div>
            <p>Page B</p>
         </div>);
      }
}
export default PageB;

question from:https://stackoverflow.com/questions/65944412/react-router-how-to-animate-separate-parts-of-page-on-page-transition

Answer 1

Waitting for answers