この記事でできること
Chakra UI の Transitionsコンポーネント の挙動を変更する。
解決したいこと
Chakra UIには、良く使われるトランジションがコンポーネントとして用意されている。
デフォルトだと動きが早いので、遅くしたい。
しかし、公式ドキュメントの上記のページにはdurationやeasingを設定できそうなプロパティの説明が書かれておらず、悩んだ。
解決策
以下の通り、 transitionプロパティ をコンポーネントに追加することでdurationやeasingを設定することができた。
例
import { Box, Button, Container, SlideFade, useDisclosure } from "@chakra-ui/react"
export default function SlideFadeEx() {
const { isOpen, onToggle } = useDisclosure();
return (
<Container mt="80px">
<Button onClick={onToggle}>Click Me</Button>
<SlideFade
in ={isOpen}
offsetX="80px"
+ transition={{
+ enter: {
+ duration: 2,
+ ease : "easeOut",
+ },
+ exit: {
+ duration: 2,
+ ease : "easeIn"
+ }
+ }}
>
<Box
p ="40px"
color ="white"
mt ="4"
bg ="teal.500"
rounded="md"
shadow ="md"
>
SlideFadeコンポーネントにeasingを設定したい！！！
</Box>
</SlideFade>
</Container>
)
}
↓ SlideFadeコンポーネント のデフォルトの動き ↓
↓ 上記ソースコードの表示結果 ↓
解説
transitionプロパティでは以下の設定ができる。（どちらかだけ設定することも可能）
| 属性名 | 設定できる内容 |
|---|---|
enter |
要素が現れるときの設定 |
exit |
要素が消えるときの設定 |
enter / exit はそれぞれ Framer Motion の Transition と同じプロパティを持つ。
上記の例で設定したプロパティは以下の通り。
| 属性名 | 設定できる内容 |
|---|---|
duration |
アニメーションの長さ |
ease |
既存のイージング関数(※) or ベジェ曲線を表す数字の配列 |
(※) Framer Motionには以下の関数のみ組み込まれている。
"linear"-
"easeIn","easeOut","easeInOut" -
"circIn","circOut","circInOut" -
"backIn","backOut","backInOut" "anticipate"