1.react过渡效果
1.1 在react项目中下载安装过渡动画模块
cnpm install react-transition-group --save
1.2 在需要执行过渡的组件中导入动画模块
import { CSSTransition } from 'react-transition-group' // 导入css动画的组件模块
1.3 在需要过渡的标签外层添加CSSTranstion组件
<CSSTransition in={bool} timeout={2000} classNames="animate">
<h1>这是动态显示的标签或组件</h1>
</CSSTransition>
使用动画的写法 CSSTransition 需要设置三个属性:
- in: 控制子元素显示隐藏的条件,一般是bool值或表达式
- timeout: 入场或出场动画的时间,单位默认毫秒
- className: 入场或出场class属性名前缀
1.4 在组建的css中通过class设置入场和出场动画
有两个过程,总共六个样式:
.animate-exit .animate-exit-active
.animate-exit-done
/* 入场动画过程 */
.animate-enter{
opacity: 0;
transform: translateY(300px);
}
.animate-enter-active{
transition: 2s;
opacity: 1;
transform: translateY(0px);
}
.animate-enter-done{
opacity: 1;
transform: translateY(0px);
}
/* 出场动画过程 */
.animate-exit{
opacity: 1;
transform: translateY(0px);
}
.animate-exit-active{
transition: 2s;
opacity: 0;
transform: translateY(300px);
}
.animate-exit-done{
opacity: 0;
transform: translateY(300px);
}
注意:
1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒
2, 需要在src/index.js中关闭严格模式<React.StrictMode>或删除
3, enter-active和exit-active中要写 过渡结束状态 才有效
4, 动画样式写完后,要导入需要执行过渡的组件中才能生效
import "./Animate.css" // 导入动画样式
2.react路由切换动画
2.1 在react项目中下载安装过渡动画模块
cnpm install react-transition-group --save
2.2 在路由配置文件/src/router/index.js中导入动画组件
import { TransitionGroup, CSSTransition } from 'react-transition-group'
2.3 在路由组件模板中,用动画组件包裹路由组件
<TransitionGroup>
<CSSTransition timeout={2000} className="dg" unmountOnExit key={props.location.pathname}>
<Switch location={props.location}>
<Route exact path="/animate" component={Animate}/>
</Switch>
</CSSTransition>
</TransitionGroup>
注意:CSSTransition组件的key属性值要保证唯一性,所以用location.pathname
Switch组件要设置location属性为路由信息的props.location,保证路由跳转组件的key和CSSTransition的key一致
2.4 路由组件中没有路由信息location.pathname, 需要使用withRouter导入
import { withRouter } from 'react-router-dom'
export default withRouter(MyRouter)
2.5 在组件的css文件中写路由切换动画过程
/* 入场动画过程 */
.dg-enter{
transform: translateX(200px)
}
.dg-enter-active{
transition: 2s;
transform: translateX(0px)
}
.dg-enter-done{
transform: translateX(0px)
}
/* 出场动画过程 */
.dg-exit{
transform: translateX(0px)
}
.dg-exit-active{
transition: 2s;
transform: translateX(200px)
}
.dg-exit-done{
transform: translateX(200px)
}
.home, .user, .login, .animate{
position: absolute;
left: calc(50% - 200px)
}