动画

使用 CSS 关键帧或您选择的 JavaScript 动画库来为 Radix 组件库添加动画。

为 Radix 组件库添加动画应该与任何其他组件类似，但这里有一些注意事项，涉及到使用 JS 动画库时的退出动画。

使用 CSS 动画

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

您可以使用 CSS 动画来为挂载和卸载阶段添加动画。后者之所以可行，是因为 Radix 组件库会在您的动画播放完毕时暂停卸载。

@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 动画委托卸载

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

例如，如果您想使用 React Spring 为 Dialog 添加动画，您可以根据其某个 hook（例如 useTransition）中的动画状态有条件地渲染对话框的 Overlay 和 Content 部分。

import * as Dialog from '@radix-ui/react-dialog';
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 动画委托卸载