Yamada UIにスターをあげる
スターScaleFadeは、要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。
説明
The HTML element to render.
タイプ
"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 149 more ... | "textPath"説明
The visual color appearance of the component.
タイプ
"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"説明
Custom delay definition for enter and exit.
タイプ
number | MotionLifecycleProps<number>説明
Custom duration definition for enter and exit.
タイプ
number | MotionLifecycleProps<number>説明
Custom enter.
タイプ
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.
``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>
)
}
``
タイプ
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)
``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 }} />
``
タイプ
any説明
Show the component. triggers when enter or exit states.
タイプ
boolean説明
If true, the element will transition back to exit state.
タイプ
booleanデフォルト
true説明
The initial scale of the element.
タイプ
numberデフォルト
0.95説明
The size of the ScaleFade.
タイプ
string説明
Custom transition definition for enter and exit.
タイプ
MotionLifecycleProps<Transition$1>説明
Custom transitionEnd definition for enter and exit.
タイプ
MotionLifecycleProps<MakeCustomValueType<TargetProperties>>説明
If true, the element will unmount when isOpen={false} and animation is done.
タイプ
boolean説明
The variant of the ScaleFade.
タイプ
stringGitHubでこのページを編集する