【Chakra UI】Transitionsコンポーネントの挙動を変更したい！

この記事でできること

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"

参考サイト

• Chakra UI - Transitions
• Chakra UI - SlideFadeコンポーネント
• Chakra UI - Containerコンポーネント
• Chakra UI - Buttonコンポーネント
• Chakra UI - Boxコンポーネント
• Framer Motion - Transition