example-tailwind-animation

用途

该示例演示如何在 Helios 组合中使用 Tailwind CSS，用标准工具类完成样式设置与动画，并与 Helios 的动画同步能力结合。

主要能力

• 在 Helios 组合中直接使用 Tailwind 工具类进行布局与样式（如 w-full、h-full、bg-slate-900、flex、items-center、justify-center 等）。
• 使用 Tailwind 内置动画类（如 animate-bounce、animate-spin）实现动画效果。
• 通过 Helios 的 autoSyncAnimations 选项将标准 CSS 动画与 Helios 时间轴同步。
• 支持在 tailwind.config.js 中通过 theme.extend.animation 扩展自定义关键帧动画，示例为 'spin-slow': 'spin 3s linear infinite'。

使用方式

1. 配置 Helios，开启自动同步：

const helios = new Helios({
  // ...
  autoSyncAnimations: true, // Enable CSS synchronization
  animationScope: document.getElementById('app')
});

1. 在元素上使用 Tailwind 类：

<div class="w-full h-full bg-slate-900 flex items-center justify-center">
  <div class="animate-bounce text-6xl text-white font-bold">
    Hello Helios
  </div>
</div>

1. 如需自定义动画，在 tailwind.config.js 中扩展：

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

1. 开启 autoSyncAnimations 后，标准 CSS 动画（如 animate-bounce、animate-spin）会被 Helios 自动接管，调用 helios.seek() 可将 CSS 动画定位到对应时间点。

关键模式与注意事项

• 作用域样式：在 monorepo 或示例目录中工作时，需确保 tailwind.config.js 的 content 数组正确指向目标文件，以避免全局样式泄漏或样式缺失。
• 自动同步：autoSyncAnimations: true 是启用 CSS 动画与 Helios 时间轴联动的关键开关。

适用场景

适合使用 Tailwind CSS 工具类为 Helios 组合设置样式并添加动画，且需要将 CSS 动画与 Helios 时间轴同步（如逐帧定位、拖动时间轴）的开发场景。

限制

资料未提供该示例的兼容性要求、Helios 版本约束、性能表现或完整示例代码说明，相关内容暂未提供。