动画

使用 CSS 动画帧或您选择的 JavaScript 动画库为 Radix Primitives 添加动画。

为 Radix Primitives 添加动画应该和其他组件类似，但需要注意在使用 JS 动画库时与退出动画相关的一些注意事项。

使用 CSS 动画进行动画处理

为 Primitives 添加动画的最简单方法是使用 CSS。

您可以使用 CSS 动画来处理挂载和卸载阶段。后者之所以可行，是因为 Radix Primitives 会在动画播放时暂停卸载。

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.DialogOverlay[data-state="open"],
.DialogContent[data-state="open"] {
	animation: fadeIn 300ms ease-out;
}

.DialogOverlay[data-state="closed"],
.DialogContent[data-state="closed"] {
	animation: fadeOut 300ms ease-in;
}

为 JavaScript 动画委托卸载

当许多状态 Primitives 被隐藏时，它们实际上是从 React 树中移除的，它们的元素也从 DOM 中移除了。JavaScript 动画库需要控制卸载阶段，因此我们在许多组件上提供了 forceMount 属性，以允许消费者根据这些库确定的动画状态来委托子项的挂载和卸载。

例如，如果您想使用 React Spring 来为 Dialog 动画，您可以通过根据其钩子之一（如 useTransition）中动画状态有条件地渲染对话框的 Overlay 和 Content 部分：

import { Dialog } from "radix-ui";
import { useTransition, animated, config } from "react-spring";

function Example() {
	const [open, setOpen] = React.useState(false);
	const transitions = useTransition(open, {
		from: { opacity: 0, y: -10 },
		enter: { opacity: 1, y: 0 },
		leave: { opacity: 0, y: 10 },
		config: config.stiff,
	});
	return (
		<Dialog.Root open={open} onOpenChange={setOpen}>
			<Dialog.Trigger>打开对话框</Dialog.Trigger>
			{transitions((styles, item) =>
				item ? (
					<>
						<Dialog.Overlay forceMount asChild>
							<animated.div
								style={{
									opacity: styles.opacity,
								}}
							/>
						</Dialog.Overlay>
						<Dialog.Content forceMount asChild>
							<animated.div style={styles}>
								<h1>来自对话框内部的问候！</h1>
								<Dialog.Close>关闭</Dialog.Close>
							</animated.div>
						</Dialog.Content>
					</>
				) : null,
			)}
		</Dialog.Root>
	);
}

上一篇样式 Styling

下一篇组合函数 Composition

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

动画

使用 CSS 动画进行动画处理

为 JavaScript 动画委托卸载