参考文档.zip

1, 在react工程中下载安装过渡动画模块 npm install react-transition-group --save 2, 在需要执行过渡的组件中导入动画模块 import { CSSTransition } from "react-transition-group" 3, 在需要过渡的标签外层添加CSSTranstion组件 <CSSTransition in={bool} timeout={2000} classNames="myfade"> <div></div> </CSSTransition> 4, 在组建的css中通过class设置入场和出场动画 .myfade-enter .myfade-enter-active .myfade-enter-done .myfade-exit .myfade-exit-active .myfade-exit-done 注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒 2, 需要在index.js中关闭严格模式, 删除 <React.StrictMode> 3, enter-active和exit-active中要写过渡结束状态才有效 ？、？？、、、、、、、 首先，你需要安装React Transition Group库： Copy npm install react-transition-group 然后，你可以在你的路由组件中CSSTransition组件来实现动画效果。例如，你可以在路由切换时使用fade动画来实现页面的淡入淡出效果： jsx Copy import React from 'react'; import { Switch, Route, withRouter } from 'react-router-dom'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import './App.css'; const App = ({ location }) => ( <div className="App"> <TransitionGroup> <CSSTransition key={location.key} classNames="fade" timeout={300}> <Switch location={location}> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </CSSTransition> </TransitionGroup> </div> ); const Home = () => ( <div> <h1>Home</h1> <p>Welcome to my website!</p> </div> ); const About = () => ( <div> <h1>About</h1> <p>Learn more about me and my work.</p> </div> ); const Contact = () => ( <div> <h1>Contact</h1> <p>Get in touch with me.</p> </div> ); export default withRouter(App); 在上面的代码中，我们使用了CSSTransition组件来包裹Switch组件，并设置了key、classNames和timeout属性。key属性用于唯一标识每个路由组件，classNames属性用于指定动画效果的CSS类名，timeout属性用于设置动画的持续时间。 接下来，你需要在CSS文件中定义fade动画的CSS类： css Copy .fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity300ms ease-in; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 300ms ease-in; } 在上面的CSS代码中，我们定义了.fade-enter和.fade-exit类来设置路由组件的初始状态和结束状态，定义了.fade-enter-active和.fade-exit-active类来设置路由组件的动画效果。 现在，当你在应用程序中切换路由时，你应该能够看到页面的淡入淡出效果了。