React 条件渲染过渡动画

React 条件渲染过渡动画

欢迎到我的博客下与我讨论React 条件渲染过渡动画

最近技术栈转为React开发，发现React虽然有条件渲染，但是没有像Vue一样自带条件渲染的过渡组件，一般大家推荐使用React官方维护的React Transition Group。但是这个项目文档没有中文翻译对照，其次变换类型不是很多。

为了避免麻烦，没有使用React Transition Group，最后发现项目组用的前端UI库Material-UI中封装了过渡组件，官方文档写的已经很详细了:Transitions 过渡动画这里直接贴代码

import Slide from '@material-ui/core/Slide';

<Slide direction="up" in={checked} mountOnEnter unmountOnExit>
	<div>
  	<Card>
    ...
    </Card>
  </div>
</Slide>

需要注意的是

• 为了避免一些奇怪的bug，建议直接在过渡组件里套一层div再嵌套内容以免出现一些样式覆盖的情况
• 最好不要将内容如官网一样抽提出来为一个组件，会出现奇怪的报错