as
説明
The HTML element to render.
タイプ
keyof IntrinsicElementsSlideFade
SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。
Props
SlideFadeProps
colorScheme
説明
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"delay
説明
Custom delay definition for enter and exit.
タイプ
number | MotionLifecycleProps<number>duration
説明
Custom duration definition for enter and exit.
タイプ
number | MotionLifecycleProps<number>enter
説明
Custom enter.
タイプ
anyexit
説明
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>
)
}
``
タイプ
anyinitial
説明
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 }} />
``
タイプ
anyisOpen
非推奨説明
Show the component. triggers when enter or exit states.
非推奨
Use open instead.
タイプ
booleanoffsetX
説明
The offset on the horizontal or x axis.
タイプ
UIValue<string | number>デフォルト
0offsetY
説明
The offset on the vertical or y axis.
タイプ
UIValue<string | number>デフォルト
8open
説明
Show the component. triggers when enter or exit states.
タイプ
booleanreverse
説明
If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.
タイプ
booleanデフォルト
truesize
説明
The size of the SlideFade.
タイプ
stringtransition
説明
Custom transition definition for enter and exit.
タイプ
MotionLifecycleProps<Transition>transitionEnd
説明
Custom transitionEnd definition for enter and exit.
タイプ
MotionLifecycleProps<Target>unmountOnExit
説明
If true, the element will unmount when isOpen={false} and animation is done.
タイプ
booleanvariant
説明
The variant of the SlideFade.
タイプ
stringGitHubでこのページを編集する