@douyinfe/semi-animation-react v2.57.0
React animation library based on
@douyinfe/semi-animation
.
The transition animation effects of all components in @douyinfe/semi-ui
are implemented based on this animation library, such as: Modal, Tooltip, Collapse and other component content display and exit effects.
Install
npm install @douyinfe/semi-animation-react
Usage
Transition Component
It is used to realize the animation effect of the component show and exit. Examples are as follows:
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>
);
}
Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
from | Object | Y | Initial state | |
enter | Object | Y | Show the end state of the animation, but also the initial state of the exit animation | |
leave | Object | Y | Exit the termination state of the animation | |
state | Enum 'enter', 'leave' | N | '' | Current state |
willEnter | Function | N | ()=> {} | The callback function before the enter animation starts |
didEnter | Function | N | ()=> {} | The callback function before the animation ends |
willLeave | Function | N | ()=> {} | The callback function before the exit animation starts |
didLeave | Function | N | ()=> {} | The callback function before the exit animation ends |
onStart | Function | N | ()=> {} | The callback function before animation starts,including enter and exit |
onRest | Function | N | ()=> {} | The callback function before animation ends,including enter and exit |
config | ConfigType | N | {} | Additional animation parameters |
config
Name | Type | Default | Description |
---|---|---|---|
duration | Number | 1000 | Animation duration.If this parameter is passed in, the easing function of the animation will use easing or linear function,unit: ms |
easing | Function|String | Easing function for animation. If duration is not passed, the spring easing function is used by default. If the duration parameter is passed in, the linear easing function will be used by default.For example, incoming "cubic-bezier(.17,.67,.83,.67)" will cause the animation frame update performed according to this easing function | |
tension | Number | 170 | Tension, used for spring easing function |
friction | Number | 14 | Friction, used for spring easing function |
3 days ago
4 days ago
14 days ago
17 days ago
17 days ago
17 days ago
17 days ago
21 days ago
21 days ago
22 days ago
23 days ago
24 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
9 months ago
10 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
7 months ago
8 months ago
6 months ago
7 months ago
9 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
10 months ago
8 months ago
10 months ago
10 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
6 months ago
7 months ago
7 months ago
7 months ago
5 months ago
6 months ago
8 months ago
6 months ago
6 months ago
5 months ago
7 months ago
10 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago