如何入门React过渡动画组件的使用教程？

本文共计2362个文字，预计阅读时间需要10分钟。

目录

1.基础使用

2.集成animate.css到CSS Transition

3.列表过渡效果

4.Switch Transition动画

5.路由切换过渡

6.高级组件实现路由过渡

1.基础使用

介绍：在项目中，可能需要对某些组件的显示进行控制，以实现更丰富的交互体验。

目录

• 1. 基础使用
• 2. 将animate.css集成到csstranistion中
• 3. 列表过渡
• 4. switchTransition动画
• 5. 路由切换过渡
• 6. 高阶组件实现路由切换过渡

1. 基础使用

介绍：

在项目中可能会给一些组件的显示或隐藏添加某种过渡动画，这样可以很好的增加用户的使用体验， react-transition-group 是 react 的第三方模块，借助这个模块可以实现动画切换效果。

安装：

yarn add react-transition-group

使用：

上面这张图描述了一个动画过渡的过程，它表示动画在入场阶段，透明度由0变为1，在出场阶段，透明度由1变为0。