动画

我们建议使用 CSS 动画来为您的 Chakra UI 组件添加动画效果。这种方法性能良好，简单直接，并提供了很大的灵活性。

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

进入动画

当一个展开组件（如气泡卡片、对话框）打开时，data-state 属性被设置为 open。这映射到 data-state=open，并且可以使用 _open 伪属性进行样式设置。

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

这是一个使用关键帧创建淡入动画的示例

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

退出动画

当一个展开组件（如气泡卡片、对话框）关闭时，data-state 属性被设置为 closed。这映射到 data-state=closed，并且可以使用 _closed 伪属性进行样式设置。

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

这是一个使用关键帧创建淡出动画的示例

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

组合动画

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

<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>