"use client"
import {
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
present={open}
animationName={{ _open: "fade-in", _closed: "fade-out" }}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Fade
</Center>
</Presence>
</Stack>
)
}
用法
¥Usage
import { Presence } from "@chakra-ui/react"<Presence present={true}>
<div>Presence content</div>
</Presence>可以将 Presence 视为 Framer Motion 中的 AnimatePresence 组件，只不过它是为 CSS 动画构建的。
¥Think of Presence like the AnimatePresence component from Framer Motion,
except that it's built for CSS animations instead.
需要注意的关键事项：
¥The key things to note:
-
presentprop 是一个布尔值，用于控制组件的存在状态。 -
_open条件用于设置打开状态的样式。 -
_closed条件用于设置关闭状态的样式。
示例
¥Examples
淡入淡出
¥Fade
将动画名称设置为 fade-in 和 fade-out，组件将为元素的进入和退出添加动画。
¥Setting the animation name to fade-in and fade-out, the component will
animate the entry and exit of the element.
"use client"
import {
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
present={open}
animationName={{ _open: "fade-in", _closed: "fade-out" }}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Fade
</Center>
</Presence>
</Stack>
)
}
缩放淡入淡出
¥Scale Fade
使用动画样式 scale-fade-in 和 scale-fade-out，组件将为元素的进入和退出添加动画。
¥Using the animation styles scale-fade-in and scale-fade-out, the component
will animate the entry and exit of the element.
"use client"
import {
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
present={open}
animationStyle={{ _open: "scale-fade-in", _closed: "scale-fade-out" }}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Scale Fade
</Center>
</Presence>
</Stack>
)
}
滑动淡入淡出
¥Slide Fade
以下是使用动画名称 slide-from-bottom 和 slide-to-bottom 为元素的进入和退出设置动画的示例。
¥Here's an example that uses the animation names slide-from-bottom and
slide-to-bottom to animate the entry and exit of the element.
"use client"
import {
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
present={open}
animationName={{
_open: "slide-from-bottom, fade-in",
_closed: "slide-to-bottom, fade-out",
}}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Slide Fade
</Center>
</Presence>
</Stack>
)
}
滑动
¥Slide
以下是使用动画名称 slide-from-bottom-full 和 slide-to-bottom-full 为元素的进入和退出设置动画的示例。
¥Here's an example that uses the animation names slide-from-bottom-full and
slide-to-bottom-full to animate the entry and exit of the element.
"use client"
import {
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
position="fixed"
bottom="0"
insetX="0"
present={open}
animationName={{
_open: "slide-from-bottom-full",
_closed: "slide-to-bottom-full",
}}
animationDuration="moderate"
>
<Center p="10" roundedTop="md" layerStyle="fill.muted">
Slide
</Center>
</Presence>
</Stack>
)
}
延迟加载
¥Lazy Mount
使用 lazyMount 属性延迟组件的挂载，直到其出现。
¥Use the lazyMount prop to delay the mount of the component until it's present.
"use client"
import {
Alert,
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Alert.Root>
<Alert.Indicator />
<Alert.Title>
Check the DOM to see that the element not mounted initially
</Alert.Title>
</Alert.Root>
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
lazyMount
present={open}
animationName={{ _open: "fade-in", _closed: "fade-out" }}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Fade
</Center>
</Presence>
</Stack>
)
}
退出时卸载
¥Unmount On Exit
使用 unmountOnExit 属性在组件不存在时卸载组件。
¥Use the unmountOnExit prop to unmount the component when it's not present.
"use client"
import {
Alert,
Button,
Center,
Presence,
Stack,
useDisclosure,
} from "@chakra-ui/react"
const Demo = () => {
const { open, onToggle } = useDisclosure()
return (
<Stack gap="4">
<Alert.Root>
<Alert.Indicator />
<Alert.Title>
Check the DOM to see that the element is removed when not present.
</Alert.Title>
</Alert.Root>
<Button alignSelf="flex-start" onClick={onToggle}>
Click Me
</Button>
<Presence
unmountOnExit
present={open}
animationName={{ _open: "fade-in", _closed: "fade-out" }}
animationDuration="moderate"
>
<Center p="10" layerStyle="fill.muted">
Fade
</Center>
</Presence>
</Stack>
)
}