引入第三方组件库react-transition-group
- 在创建完项目之后,使用 npm run eject 暴露项目的配置文件;
- 使用 npm i 安装依赖包;
- 使用 npm install react-transition-group 安装动画组件库;它会导出三个组件, Transition, CSSTransition, TransitionGroup。
- 在需要使用动画的页面引入相应的模块。
Transition
1. 两种插入节点的方法:
// 1. 函数方式,可以利用status得到现在transition的状态
<Transition>
{
(status) => (<div>React</div>)
}
</Transition>
// 2. jsx dom节点元素
<Transition>
<div>React</div>
</Transition>
2. 页面初始化时需要组件有挂载动画效果需要设置属性 appear 为 true。
------------持续