adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
69 lines (65 loc) • 1.84 kB
Markdown
order: 3
title:
zh-CN: animation
en-US: animation
JS：通过 `animation` 自定义地控制每个阶段。
```jsx
const [visible, setVisible] = useState(false)
return (
<div className="w-2/4 text-center">
<Button onClick={() => setVisible(!visible)}>toggle animation</Button>
<Motion
animation={{
enter(node, done) {
node.style.opacity = "0"
node.style.transform = "translateX(50px)"
node.style.height = "0"
setTimeout(() => {
node.style.opacity = "1"
node.style.transform = "translateX(0)"
node.style.height = "160px"
}, 50)
const promise = new Promise((resolve) => setTimeout(resolve, 300))
promise.then(() => {
return done()
})
},
leave(node, done) {
node.style.opacity = "0"
node.style.transform = "translateX(50px)"
node.style.height = "0"
const promise = new Promise((resolve) => setTimeout(resolve, 300))
promise.then(() => {
return done()
})
},
}}
>
{visible && <div className="adui-custom-example"></div>}
</Motion>
<style
dangerouslySetInnerHTML={{
__html: `
.adui-custom-example {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
height: 160px;
font-family: SFMono-Semibold;
font-size: 13px;
line-height: 20px;
color: rgb(255, 255, 255);
font-weight: 600;
border-radius: 6px;
background-color: var(--primary-color);
transition: .3s ease all;
}
`,
}}
/>
</div>
)
```