基于
@douyinfe/semi-animation。 。 。 .
所有组件在 @douyinfe/semi-ui 根据这个动画库执行,例如: Modal, Tooltip, Collapse 和其他组件内容显示和退出效果.
安装
npm install @douyinfe/semi-animation-react
使用量
过渡构成部分
它用于实现组件的动画效果[显示并退出]. 例如:
import { Transition } from "@douyinfe/semi-animation-react";
import { useState } from "react";
export default function App() {
const [visible, setVisible] = useState(false);
return (
<div className="App">
<Transition
state={visible ? "enter" : "leave"}
from={{ opacity: 0, scale: 0}}
enter={{ opacity: 1, scale: 1 }}
leave={{ opacity: 0, scale: 0 }}
>
{({ scale, opacity }: any) => (
<h2 style={{transform: `scale(${scale})`, opacity}}>
Toggle to see some animation happen!
</h2>
)}
</Transition>
<button onClick={() => {
setVisible((state) => !state)
}}>toggle</button>
</div>
);
}
道具
| 名称 | 类型 | 需求 | 默认 | 说明 |
|---|---|---|---|---|
| 从 | 对象 | Y | 初始状态 | |
| 输入 | 对象 | Y | 显示动画的结束状态, 但也显示退出动画的初始状态 | |
| 离开 | 对象 | Y | 退出动画的终止状态 | |
| 状态 | Enum “ 进入” 、 “ 离开” | 无 | '' | 当前状态 |
| 将输入 | 函数 | 无 | => {} | 输入动画开始前的回调功能 |
| 输入 | 函数 | 无 | => {} | 动画结束前的回调功能 |
| 将离开 | 函数 | 无 | => {} | 退出动画开始前的回调功能 |
| 离开 | 函数 | 无 | => {} | 退出动画结束前的回调功能 |
| 开始 | 函数 | 无 | => {} | 动画开始前的回调功能,包括出入口 |
| 备份 | 函数 | 无 | => {} | 动画结束前的回调功能, 包括进出 |
| 配置 | 配置类型 | 无 | {} | 其他动画参数 |
配置
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 会期 | 数目 | 1 000个 | 动画持续时间. 如果通过此参数, 动画的放松功能将使用松动或线性函数, unit: ms |
| 放宽 | 函数 QQ 串 | 减轻动画功能. 如果持续时间没有通过,则默认使用弹簧松动功能. 如果持续时间参数被传入,则默认会使用线性宽松函数. 例如,收到的 "cubic-bezier(.17,.67,.83,.67)" 将会使动画帧更新按照此轻松功能进行 | |
| 紧张 | 数目 | 170国 | 紧张,用于弹簧松动功能 |
| 摩擦 | 数目 | 页:1 | Friction,用于弹簧松动功能 |