Leave Yamada UI a star
StarSlideFade is a component that gradually shows or hides an element while moving it from a specified position.
Description
The HTML element to render.
Type
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 149 more ... | "textPath"Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Description
Custom delay definition for enter and exit.
Type
number | MotionLifecycleProps<number>Description
Custom duration definition for enter and exit.
Type
number | MotionLifecycleProps<number>Description
Custom enter.
Type
anyDescription
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.
``jsx
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
``
Type
anyDescription
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)
``jsx
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
``
Type
anyDescription
Show the component. triggers when enter or exit states.
Deprecated
Use open instead.
Type
booleanDescription
The offset on the horizontal or x axis.
Type
UIValue<string | number>Default
0Description
The offset on the vertical or y axis.
Type
UIValue<string | number>Default
8Description
Show the component. triggers when enter or exit states.
Type
booleanDescription
If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.
Type
booleanDefault
trueDescription
The size of the SlideFade.
Type
stringDescription
Custom transition definition for enter and exit.
Type
MotionLifecycleProps<Transition$1>Description
Custom transitionEnd definition for enter and exit.
Type
MotionLifecycleProps<MakeCustomValueType<TargetProperties>>Description
If true, the element will unmount when isOpen={false} and animation is done.
Type
booleanDescription
The variant of the SlideFade.
Type
stringEdit this page on GitHub