SlideFade
SlideFade is a component that gradually shows or hides an element while moving it from a specified position.
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} borderWidth="1px" p="md" rounded="l2">
クラスは最低じゃないぞ！メンバーが最低なだけだ！
</SlideFade>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { SlideFade } from "@yamada-ui/react"
import { SlideFade } from "@/components/ui"
import { SlideFade } from "@workspaces/ui"
<SlideFade />
Change the Duration
To change the duration, set a number (in seconds) to duration.
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} duration={0.4} borderWidth="1px" p="md" rounded="l2">
確かにアイツは勉強ができない。でもな、学力が低いからといって、全てが決まるわけじゃないだろう？
</SlideFade>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change the Position
To change the position, specify a string or number for offsetX or offsetY.
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade
open={open}
offsetX={8}
offsetY={0}
borderWidth="1px"
p="md"
rounded="l2"
>
……私、このクラスの皆が好きなんです。人の為に一生懸命な皆のいる、Fクラスが
</SlideFade>
<SlideFade open={open} offsetY={-8} borderWidth="1px" p="md" rounded="l2">
……女は胸じゃないのに。アキの、バカ……
</SlideFade>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Unmount on Exit
To unmount the component when it is not visible, set unmountOnExit to true.
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade
open={open}
offsetY={-8}
unmountOnExit
borderWidth="1px"
p="md"
rounded="l2"
>
考えすぎではないかのぅ。メイド服くらい人間一度は着るものじゃ
</SlideFade>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Delay
To delay the animation, set a number (in seconds) to delay.
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} delay={0.5} borderWidth="1px" p="md" rounded="l2">
たとえ許されない行為であろうとも自分の気持ちは偽れない。正直に言おう、今僕は…純粋に欲望のために女子風呂を覗きたいッ！！
</SlideFade>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.