动画

了解如何在 Chakra UI 中自定义动画和关键帧

信息

请先阅读概述，了解如何正确自定义样式引擎并获得类型安全。

关键帧

关键帧用于定义动画序列。以下是定义自定义关键帧的方法

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    keyframes: {
      shakeX: {
        "0%, 100%": { transform: "translateX(-100%)" },
        "50%": { transform: "translateX(100%)" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

动画令牌

定义关键帧后，您可以创建引用它们的动画令牌。动画令牌可以包含关键帧名称、持续时间、计时函数和其他动画属性。

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    keyframes: {
      // ... keyframes from above
    },
    tokens: {
      animations: {
        shakeX: { value: "shakeX 1s ease-in-out infinite" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

用法

您可以在组件的样式属性中直接使用动画令牌。

<Box animation="shakeX" />

或作为单独的动画属性使用

<Box
  animationName="shakeX"
  animationDuration="1s"
  animationTimingFunction="ease-in-out"
  animationIterationCount="infinite"
/>

概述

断点