动画

使用 CSS 关键帧、原生 Vue 过渡或您选择的 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;
}

使用 Vue 过渡

除了使用 CSS 动画之外，您可能更喜欢使用原生 Vue <Transition>。好消息！它应该和包装组件（具有 forceMount 属性）一样简单，您就完成了！

<script setup lang="ts">
import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, } from 'radix-vue'
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>
      Edit profile
    </DialogTrigger>
    <DialogPortal>
      <Transition name="fade">
        <DialogOverlay />
      </Transition>
      <Transition name="fade">
        <DialogContent>
          <h1>Hello from inside the Dialog!</h1>
          <DialogClose>Close</DialogClose>
        </DialogContent>
      </Transition>
    </DialogPortal>
  </DialogRoot>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

提示

此外，我们发现 Motion One，一个基于 Web Animations API 的动画库与 Radix Vue 完美兼容。

查看此 Stackblitz 演示 🤩

为 JavaScript 动画委托卸载

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

例如，如果您想使用 @vueuse/motion 为 Dialog 添加动画，您可以根据其可组合（如 useSpring）中的动画状态有条件地渲染对话框的 Overlay 和 Content 部分。

<script setup lang="ts">
import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, } from 'radix-vue'
import { reactive, ref, watch } from 'vue'
import { useSpring } from '@vueuse/motion'

const stages = {
  initial: { opacity: 0, scale: 0, top: 0, },
  enter: { opacity: 1, scale: 1, top: 50, },
  leave: { opacity: 0, scale: 0.6, top: 30, },
}

const styles = reactive(stages.initial)
const { set } = useSpring(styles, {
  damping: 8,
  stiffness: 200,
})

const open = ref(false)
watch(open, () => {
  if (open.value)
    set(stages.enter)
  else
    set(stages.leave)
})
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>
      Edit profile
    </DialogTrigger>
    <DialogPortal v-if="styles.opacity !== 0">
      <DialogOverlay
        force-mount
        :style="{
          opacity: styles.opacity,
          transform: `scale(${styles.scale})`,
        }"
      />
      <DialogContent
        force-mount
        :style="{
          opacity: styles.opacity,
          top: `${styles.top}%`,
        }"
      >
        <h1>Hello from inside the Dialog!</h1>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

提示

查看此 Stackblitz 演示