Rotate
Rotateは、２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。
<Rotate
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
使い方
import { Rotate } from "@yamada-ui/react"
import { Rotate } from "@/components/ui"
import { Rotate } from "@workspaces/ui"
<Rotate />
角度を変更する
角度を変更する場合は、rotateに数値を設定します。デフォルトでは、45が設定されています。
<Rotate
rotate={-360}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
<Rotate
duration={1.4}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
遅延させる
遅延させる場合は、delayに数値(秒)を設定します。
<Rotate
delay={1}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
無効にする
無効にする場合は、disabledをtrueにします。
<Rotate
disabled
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<Rotate
readOnly
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
制御する
const [value, onChange] = useState<KeyframeIdent>("from")
return (
<Rotate
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
value={value}
onChange={onChange}
/>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。