必须用 JavaScript 监听按钮 click 事件，动态添加动画类（如 show）触发淡入；文字初始 opacity: 0 且无动画，transition 写在初始类中，用 classList.add() 最稳妥；需兼顾可访问性与 reduced-motion 适配。
点击按钮后文字才开始淡入，不是页面加载就动
必须用 JavaScript 监听按钮的 click 事件，再给目标文字元素添加动画类或直接改样式。CSS 的 @keyframes 或 transition 本身不响应点击，只是“被动执行者”。
- 别把
animation写死在文字元素上（比如一开始就加class="fade-in"），否则它会在页面加载时自动播放 - 推荐做法：文字初始状态设为
opacity: 0，且不带任何动画属性；点击按钮后，动态添加一个含animation或transition的类（如show） - 如果用
transition，记得把transition: opacity 0.4s写在初始类里（比如.text），而不是只写在.text.show里，否则反向隐藏时不会过渡
用 classList.add() 触发 CSS 动画最稳妥
比直接操作 style.opacity 更可靠，避免内联样式干扰、便于复用和维护。
- HTML 示例：
<button id="trigger">显示文字</button><p id="target" class="text">这是渐显内容</p> - CSS 示例：
.text { opacity: 0; transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .text.show { opacity: 1; } - JS 示例：
document.getElementById('trigger').addEventListener('click', () => { document.getElementById('target').classList.add('show'); }); - 注意：如果用户反复点击，
add()不会重复生效，但也不会出错；若需支持“再点一次收起”，用toggle()更合适
多个文字依次渐显？靠 animation-delay 或定时器控制
纯 CSS 实现顺序动画，无需 JS 循环，但前提是 DOM 结构固定、数量已知。
- 给每个文字元素设置递增的
animation-delay，例如：.item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.15s; } ... - 如果文字是动态生成的（比如从数组渲染），就得用 JS 遍历并为每个元素设置
style.animationDelay，延迟值基于索引计算 - 慎用
setTimeout+classList.add做顺序触发——容易因 JS 执行时机与渲染帧不同步导致卡顿或错序
容易被忽略的兼容性和可访问性细节
动画效果不是“加了就行”，尤其在按钮触发场景下，几个关键点常被跳过：
立即学习“前端免费学习笔记（深入）”；
-
animation-fill-mode: forwards必须加在动画定义里，否则动画播完立刻回退到opacity: 0，文字闪一下就消失 - 按钮本身要有明确的
role="button"和tabindex="0"（如果它原生不是<button>），否则键盘用户无法聚焦触发 - 避免对所有用户强制播放动画：可通过
@media (prefers-reduced-motion: reduce)关掉动画，提升敏感人群体验 - 别让文字在渐显过程中失去语义结构——比如用伪元素覆盖真实文本做动画，会导致屏幕阅读器读不到内容
