动画

我们建议使用 CSS 动画为你的 Chakra UI 组件添加动画效果。此方法性能卓越、简单易用且灵活性极高。

¥We recommend using CSS animations to animate your Chakra UI components. This approach is performant, straightforward and provides a lot of flexibility.

你可以更好地控制组件的挂载和卸载阶段的动画。

¥You can animate both the mounting and unmounting phases of your components with better control.

进入动画

¥Enter animation

当显示组件（弹出框、对话框）打开时，data-state 属性将设置为 open。这映射到 data-state=open，并且可以使用 _open 伪属性设置样式。

¥When a disclosure component (popover, dialog) is open, the data-state attribute is set to open. This maps to data-state=open and can be styled with _open pseudo prop.

<Box
  data-state="open"
  _open={{
    animation: "fade-in 300ms ease-out",
  }}
>
  This is open
</Box>

以下是使用关键帧创建淡入动画的示例：

¥Here's an example that uses keyframes to create a fade-in animation:

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

退出动画

¥Exit animation

当显示组件（弹出框、对话框）关闭时，data-state 属性将设置为 closed。这映射到 data-state=closed，并且可以使用 _closed 伪属性设置样式。

¥When a disclosure component (popover, dialog) is closed, the data-state attribute is set to closed. This maps to data-state=closed and can be styled with _closed pseudo prop.

<Box
  data-state="closed"
  _closed={{
    animation: "fadeOut 300ms ease-in",
  }}
>
  This is closed
</Box>

以下是使用关键帧创建淡出动画的示例：

¥Here's an example that uses keyframes to create a fade-out animation:

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

动画合成

¥Composing animations

使用 animationName 属性将多个动画组合在一起。这样可以轻松创建具有多个关键帧的复杂动画。

¥Use the animationName prop to compose multiple animations together. This makes it easy to create complex animations with multiple keyframes.

<Box
  data-state="open"
  _open={{
    animationName: "fade-in, scale-in",
    animationDuration: "300ms",
  }}
  _closed={{
    animationName: "fade-out, scale-out",
    animationDuration: "120ms",
  }}
>
  This is a composed animation
</Box>