Fade

Fade is a component that gradually shows or hides an element.

その打球、消えるよ

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

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

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { Fade } from "@workspaces/ui"

<Fade />

Change the Duration

To change the duration, set a number (in seconds) to duration.

その打球、消えるよ

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

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

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

If you use this code, you need to add "use client" to the top of the file.

Unmount on Exit

To unmount the component when it is not visible, set unmountOnExit to true.

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

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

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

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

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

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`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.
`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.

Similar Components

Collapse is a component that allows you to expand or collapse an element for display.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

Slide is a component that shows or hides an element from the corners of the page.

SlideFade is a component that gradually shows or hides an element while moving it from a specified position.

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Airy is a component that provides a smooth animation to switch between two elements.

Drawer is a component for a panel that appears from the edge of the screen.

Flip is a component that provides an animation to switch between two elements while flipping.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.

Dropzone is a component used for uploading files via drag and drop.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.