动画样式

概览

动画样式允许您定义可重用的动画属性。目标是减少为组件添加动画所需的代码量。

支持的动画样式有

• 动画：动画组合、延迟、方向、持续时间、填充模式、迭代次数、名称、播放状态、时间函数

• 动画范围：动画范围、开始、结束、时间线

• 变换原点：变换原点

定义动画样式

动画样式是使用defineAnimationStyles 函数定义的。

这是一个动画样式的例子

import { defineAnimationStyles } from "@chakra-ui/react"

const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: "bounce, fade-in",
      animationDuration: "1s",
      animationTimingFunction: "ease-in-out",
      animationIterationCount: "infinite",
    },
  },
})

内置动画样式

Chakra UI 提供了一组您可以使用的内置动画样式。

更新主题

要使用动画样式，请使用 animationStyles 属性更新 theme 对象。

import { createSystem, defineConfig } from "@chakra-ui/react"
import { animationStyles } from "./animation-styles"

const config = defineConfig({
  theme: {
    animationStyles,
  },
})

export default createSystem(defaultConfig, config)

更新主题后，运行此命令以生成动画。

npx @chakra-ui/cli typegen ./theme.ts

这些动画样式可以与其他样式（如 _open 和 _closed）组合，它们映射到 data-state=open|closed 属性。

<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
>
  This content will fade in
</Box>