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>
82 lines (77 loc) • 1.92 kB
Markdown
---
order: 0
title:
zh-CN: 内部驱动
en-US: Type
---
透明度 Transition 时长测试
```jsx
const [show, setShow] = useState(false)
useEffect(() => {
setInterval(() => {
setShow((prev) => !prev)
}, 3000)
}, [])
return (
<div>
<div className="flex flex-col gap-20">
<div className="w-48 h-48">
<Transition
show={show}
className="flex items-center justify-center w-48 h-48 text-white bg-gray-700"
from="opacity-0"
to="opacity-100"
duration={200}
>
48px
</Transition>
</div>
<div className="w-100 h-100">
<Transition
show={show}
className="flex items-center justify-center w-100 h-100 text-white bg-gray-700"
from="opacity-0"
to="opacity-100"
duration={200}
>
100px
</Transition>
</div>
<div className="w-200 h-200">
<Transition
show={show}
className="flex items-center justify-center w-200 h-200 text-white bg-gray-700"
from="opacity-0"
to="opacity-100"
duration={200}
>
200px
</Transition>
</div>
<div className="w-400 h-400">
<Transition
show={show}
className="flex items-center justify-center w-400 h-400 text-white bg-gray-700"
from="opacity-0"
to="opacity-100"
duration={200}
>
400px
</Transition>
</div>
<div style={{ width: "1000px", height: "1000px" }}>
<Transition
style={{ width: "1000px", height: "1000px" }}
show={show}
className="flex items-center justify-center text-white bg-gray-700"
from="opacity-0"
to="opacity-100"
duration={200}
>
1000px
</Transition>
</div>
</div>
</div>
)
```