动画

使用 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>Open Dialog</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>Hello from inside the Dialog!</h1>
								<Dialog.Close>close</Dialog.Close>
							</animated.div>
						</Dialog.Content>
					</>
				) : null,
			)}
		</Dialog.Root>
	);
}

上一篇样式

下一篇组合

在 GitHub 上编辑此页。

概览

指南

组件

实用工具

动画

使用 CSS 动画制作动画

为 JavaScript 动画委托卸载