使用

Transition封装了react-transition-group的Transition, 用于应用过渡效果, 它使用内联样式实现过渡效果

预置的过渡效果

点击按钮查看效果

过渡开始时挂载孩子组件并且过渡结束时卸载孩子组件

设置unmountOnExit属性为ture即可.

组件挂载时in属性为true的情况

组件挂载时in属性为true, 默认不会执行过渡, 如果想要执行过渡需要同时设置appear属性为ture

刷新页面查看不同:

自定义的过渡效果

<Transition
  //...other props
  transition={{
    in: { width: "400px", height: "200px" },
    out: { width: "200px", height: "100px" },
    transitionProperty: "width,height",
  }}
>
  {(ref, styles) => <div ref={ref} style={styles}></div>}
</Transition>

TransitionGroup

TransitionGroup直接导出于react-transition-group, 用于管理多个Transition列表

TransitionGroup会自动管理其孩子Transition的in和appear属性.