アニメーション
Yamada UIは、あなたが表現したいアニメーションを簡単に実現するための機能を提供しています。
使い方
Box
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
_keyframes={{
from: { translate: "0 0" },
to: { translate: "100% 0" },
}}
>
Box
</Box>
また、テーマのキーフレームを使用することで、アプリケーション全体で共通のキーフレームを適用することができます。使用する場合は、animationNameまたは_keyframesに値を設定します。
Box
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationName="fade-in"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
>
Box
</Box>
テーマのトークンを使う
テーマのアニメーションを使用する場合は、animationに値を設定します。
Box
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animation="fade-in"
>
Box
</Box>
デフォルトでは、アニメーションのトークンは定義されていません。
コンポーネント
Yamada UIには、アニメーションをより簡単にしたコンポーネントを提供しています。
Motion
MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。
Airy
２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。
Collapse
要素を展開または折りたたんで表示するコンポーネントです。
FadeScale
要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。
Fade
要素を次第に表示または非表示にするコンポーネントです。
Flip
２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。
Ripple
要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。
Rotate
２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。
Skeleton
コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
SlideFade
要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。
Slide
要素をページの隅から表示または非表示にするコンポーネントです。
フック
Yamada UIには、アニメーションの便利なカスタムフックを提供しています。