React动画小帮手——React Transition Group

官网

What is it

一个在React开发中辅助完成一定的dom动画的第三方库？（好像是官方的）

Why to use it

• 简单易用：轻易实现dom元素动画。
• 高度自定义动画：可高度自定义动画表现。
• 准确把控动画状态：'entering' | 'entered' | 'exiting' | 'exited' 四状态。

How to use it

安装

npm install react-transition-group

若使用TypeScript，还需安装

npm install @types/react-transition-group

维护全局动画配置

该配置文件需在全局引入生效，即在App.tsx中引入

// animation.less
// 左侧进出动画
.move-in-left-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.move-in-left-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.47, 0, 0.75, 0.72);
}
.move-in-left-enter-done {
  opacity: 1;
  transform: translateX(0);
}
.move-in-left-exit {
  opacity: 1;
  transform: translateX(0);
}
.move-in-left-exit-active {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.39, 0.57, 0.56, 1);
}
.move-in-left-exit-done {
  transform: translateX(-100%);
  opacity: 0;
}

// 淡入淡出动画
.fade-in-enter {
  opacity: 0;
}
.fade-in-enter-active {
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.47, 0, 0.75, 0.72);
}
.fade-in-enter-done {
  opacity: 1;
}
.fade-in-exit {
  opacity: 1;
}
.fade-in-exit-active {
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.39, 0.57, 0.56, 1);
}
.fade-in-exit-done {
  opacity: 0;
}

组件编写

<CSSTransition
  nodeRef={confirmItemRef}  // 绑定Ref否则控制台会报错
  in={state}  // 触发动画启动
  timeout={300}  // 动画过渡时间（和animation统一）
  classNames="move-in-left"  // 选择动画，此处为'从左侧进出'
  unmountOnExit  // 退出后卸载Dom元素
>
  <div ref={confirmItemRef}>
    <Form.Item label="确认密码">
      <Input.Password
        className="h-12 rounded"
        placeholder="再次输入密码"
        autoComplete="tel"
      />
    </Form.Item>
  </div>
</CSSTransition>

通过修改 state的值则可触发对应的enter和exit动画

更多 Switch、Group等使用，可跳转官网查看