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) • 2.01 kB
Markdown
order: 2
title:
zh-CN: transitionName
en-US: transitionName
CSS：通过 `transitionName` 自定义 css animation。
```jsx
const [visible, setVisible] = useState(false)
return (
<div className="w-2/4 text-center">
<Button onClick={() => setVisible(!visible)}>toggle animation</Button>
<Motion transitionName="custom">
{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);
}
.custom-enter {
opacity: 0;
transform: translateX(50px);
animation-play-state: paused;
animation-duration: .3s;
animation-fill-mode: both;
}
.custom-leave {
opacity: 1;
transform: translateX(0);
animation-play-state: paused;
animation-duration: .3s;
animation-fill-mode: both;
}
.custom-enter.custom-enter-active {
animation-name: customAnimationIn;
animation-play-state: running;
}
.custom-leave.custom-leave-active {
animation-name: customAnimationIn;
animation-direction: reverse;
animation-play-state: running;
}
@keyframes customAnimationIn {
0% { opacity: 0; transform: translateX(50px); }
100% { opacity: 1; transform: translateX(0); }
}
`,
}}
/>
</div>
)
```