【React】react 用react-transition-group库怎么实现vue中的 mode="out-in" ?

Z时代
2024-01-10
分类：技术分享

a {
padding: 10px;
border: solid 1px red;
}
.box {
height: 100px;
width: 100px;
margin: auto;
background: cyan;
}
.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 1000ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit.fade-exit-active {
transition: opacity 1000ms;
opacity: 0;}

import React, { Component } from "react";
import {
HashRouter as Router,
Link,
Route,
Redirect,
Switch,
NavLink
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./transition.css";
const Home = () => {
return <div>Home</div>;
};
const About = () => {
return <div>About</div>;
};
export class TestTransition extends Component {
render() {
return (
<Router>
<Route
render={({ location }) => {
return (
<>
<NavLink to="/home">home</NavLink>
<NavLink to="/about">about</NavLink>
<NavLink to="/cc">cc</NavLink>
<TransitionGroup>
<CSSTransition
key={location.pathname}
classNames="fade"
timeout={1000}
>
<div className="box">
<Switch>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route render={() => <div>Not Found</div>} />
</Switch>
</div>
</CSSTransition>
</TransitionGroup>
</>
);
}}
/>
</Router>
);
}
}
export default TestTransition;