data-*属性本身不触发动画，仅作为动画参数的“启动开关”或“配置源”，需通过JavaScript读取并手动转换类型、添加类名或调用动画API来驱动CSS或JS动画。
data-* 属性本身不触发动画，但能作为动画参数的“启动开关”或“配置源”
HTML data- 属性不会自动关联 CSS 动画或 JS 动画库（如 GSAP、anime.js），它只是静态字符串容器。想让它“配合动画”，本质是用它来驱动动画逻辑：比如根据 data-animation-type="fade-in" 决定播放哪段 CSS 类，或根据 data-delay="300" 设置 JS 动画的起始时机。
用 dataset 读取值 + classList 切换实现 CSS 动画控制
这是最轻量、最常用的方式。把动画类型、持续时间、延迟等写在 data- 上，JS 读取后添加对应类名，由 CSS 完成渲染。
-
data-animation值应为合法 CSS 类名前缀（如"slide-up"），避免空格或特殊字符 - 必须手动调用
element.classList.add()，dataset.animation不会自动生效 - CSS 中需预定义好对应动画规则，例如：
.animate-slide-up { animation: slide-up 0.4s ease-out; } - 注意：修改
dataset.animation = "bounce"不会重新触发动画，需先移除再添加类名，或用animation-name动态设置
JS 动画库中用 data-* 传参要手动解析类型
像 GSAP 或 anime.js 的 to() 方法需要数字、布尔值等真实类型，而 dataset.delay 读出来永远是字符串，直接传会出错。
-
data-delay="500"→ 必须写parseInt(el.dataset.delay, 10)，否则 GSAP 把它当无效值忽略 -
data-ease="power2.out"可直接传，但需确保字符串拼写与库要求完全一致（大小写、点号） -
data-loop="true"→ 要转成布尔：el.dataset.loop === 'true'，不能用Boolean(el.dataset.loop)（非空字符串恒为 true） - 常见坑：用
el.setAttribute('data-duration', '0.6')后读dataset.duration是"0.6"，但 anime.js 需要数字0.6，不转换就静默失败
data-* 不能响应式更新动画状态，别用来做运行时控制
如果用户操作后动态改了 data-animation-state="playing"，这不会让正在播放的 CSS 动画暂停，也不会让 JS 动画自动重播——它只是个标记，后续逻辑全靠你手动写。
立即学习“前端免费学习笔记（深入）”；
- 想实现“点击按钮切换动画状态”，得监听 click，再调用
anime.pause()/anime.play()，而不是只改data- - 用
MutationObserver监听data-变更成本高、易误触发，不推荐；更适合用事件或状态管理变量 - 真正需要响应式动画控制时，优先用 JS 变量或自定义元素的属性 setter（如
set animationState(val) { this._state = val; this._applyAnimation(); }）
动画效果里最常被忽略的点是：CSS 动画依赖类名或内联样式变更来重触发，而 data- 改变既不改变类名，也不改变样式，它只是个“待处理的参数单”。你得亲手把它拆开、转类型、喂给动画系统，一步都不能少。
