React Router Transition

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.window {
  $transitionX : 30px;
  $duration    : 500ms;

  &-enter {
    transform : translate($transitionX, 0);
    opacity   : 0;
  }

  &-enter-active {
    transform  : translate(0, 0);
    opacity    : 1;
    transition : all $duration;
    //transition-delay : $duration;

  }

  &-exit {
    transform : translate(0, 0);
    opacity   : 1;
  }

  &-exit-active {
    transform  : translate(-$transitionX, 0);
    opacity    : 0;
    transition : all $duration;
    //transition-delay :  $duration;
  }

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

const Window = () => {
    const location = useLocation()
    const outlet = useOutlet() // 核心代码， 用<Outlet/> 直接替换， 不会有动画效果
    return <div style={ { width: 600, height: 400, outline: '1px solid black', overflow: 'hidden' } } >
        <SwitchTransition mode="out-in" >
            <CSSTransition
                classNames="window"
                timeout={ 300 }
                key={ location.pathname }
            >
                {/*<Outlet />*/}
                { outlet }
            </CSSTransition >
        </SwitchTransition >
    </div >
}


const App = () => {
    const links = [
        'home',
        'login',
        'about'
    ]
    return (
        <HashRouter > 
            <div >
                {
                    links.map(item => {
                        return <div key={ item } ><Link to={ item } >{ item }</Link ></div >
                    })
                }
            </div >
            <Routes >
                <Route path={ '/' } element={ <Window /> } >
                    <Route element={ <About /> } path={ 'about' } />
                    <Route element={ <Login /> } path={ 'login' } />
                    <Route element={ <Home /> } path={ 'home' } />
                    {/* any component */ }
                </Route >
            </Routes >
        </HashRouter >

    )
}