FadeScale

FadeScaleは、要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。

その打球、消えるよ

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

import { FadeScale } from "@yamada-ui/react"

import { FadeScale } from "@/components/ui"

import { FadeScale } from "@workspaces/ui"

<FadeScale />

拡大の初期値を変更する

拡大の初期値を変更する場合は、scaleに数値を設定します。この数値を基準に拡大され、縮小していきます。デフォルトは、0.95です。

その打球、消えるよ

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} scale={0.75} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

その打球、消えるよ

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} duration={0.4} borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

非表示時にアンマウントする

非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。

俺はたった今からデータを捨てる！そして俺は過去を凌駕する！

const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <FadeScale open={open} unmountOnExit borderWidth={1} p="md" rounded="l2">
      その打球、消えるよ
    </FadeScale>

    <Box borderWidth={1} p="md" rounded="l2" w="full">
      俺はたった今からデータを捨てる！そして俺は過去を凌駕する！
    </Box>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`enter`	-	`any` Custom `enter`.
`exit`	-	`any` Custom `exit`. A target to animate to when this component is removed from the tree. This component must be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
`initial`	-	`any` Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)
`delay`	`0`	`MotionLifecycleProps<number> \| number` Custom `delay` definition for `enter` and `exit`.
`duration`	`0.2`	`MotionLifecycleProps<number> \| number` Custom `duration` definition for `enter` and `exit`.
`open`	-	`boolean` Show the component. triggers when enter or exit states.
`reverse`	`true`	`boolean` If `true`, the element will transition back to exit state.
`scale`	`0.95`	`number` The initial scale of the element.
`transition`	-	`MotionLifecycleProps<Transition>` Custom `transition` definition for `enter` and `exit`.
`transitionEnd`	-	`MotionLifecycleProps<ResolvedValues>` Custom `transitionEnd` definition for `enter` and `exit`.
`unmountOnExit`	-	`boolean` If `true`, the element will unmount when `open={false}` and animation is done.

類似のコンポーネント

SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

Fadeは、要素を次第に表示または非表示にするコンポーネントです。

Collapseは、要素を展開または折りたたんで表示するコンポーネントです。

Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。

Rotateは、２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。

Rippleは、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。

Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。

使用しているコンポーネント・フック

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

使用されているコンポーネント・フック

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。