渐隐
"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>
)
}
用法
import { Presence } from "@chakra-ui/react"<Presence present={true}>
<div>Presence content</div>
</Presence>将 Presence 视为类似于 Framer Motion 的 AnimatePresence 组件，不同之处在于它专为 CSS 动画构建。
要点
present属性是一个布尔值，用于控制组件的存在状态。_open条件用于设置打开状态的样式。_closed条件用于设置关闭状态的样式。
示例
渐隐
将动画名称设置为 fade-in 和 fade-out，组件将动画化元素的进入和退出。
渐隐
"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-in 和 scale-fade-out，组件将动画化元素的进入和退出。
缩放渐隐
"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-from-bottom 和 slide-to-bottom 来动画化元素的进入和退出的示例。
滑动渐隐
"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-from-bottom-full 和 slide-to-bottom-full 来动画化元素的进入和退出的示例。
滑动
"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>
)
}
懒加载挂载
使用 lazyMount 属性来延迟组件的挂载，直到它存在。
检查 DOM，查看元素是否最初未挂载
"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>
)
}
退出时卸载
使用 unmountOnExit 属性来卸载组件，当它不存在时。
检查 DOM，查看元素是否在不存在时被移除。
渐隐
"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>
)
}