动画样式

概述

¥Overview

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

¥Animation styles allow you to define reusable animation properties. The goal is to reduce the amount of code needed to animate components.

支持的动画样式包括：

¥The supported animation styles are:

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

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

• 变换原点：transform origin

定义动画样式

¥Defining animation styles

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

¥Animation styles are defined using the defineAnimationStyles function.

以下是动画样式的示例：

¥Here's an example of an animation style:

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

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

内置动画样式

¥Built-in animation styles

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

¥Chakra UI provides a set of built-in animation styles that you can use.

更新主题

¥Update the theme

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

¥To use the animation styles, update the theme object with the animationStyles property.

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

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

export default createSystem(defaultConfig, config)

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

¥After updating the theme, run this command to generate the animations.

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

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

¥These animation styles can be composed with other styles like _open and _closed which map to the data-state=open|closed attribute.

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