本教程深入探讨如何在javascript中动态触发css动画，特别是针对移动端兼容性及动画重复执行失效的问题。通过采用基于类名切换与强制dom重绘的策略，结合现代clipboard api，实现高效、流畅且可重复的“复制成功”提示动画效果。
动态CSS动画的需求与挑战
在现代Web开发中，为用户操作提供即时、友好的视觉反馈至关重要。例如，当用户点击“复制”按钮时，显示一个短暂的“已复制”提示，并在几秒后自动消失，能够显著提升用户体验。这类效果通常通过JavaScript动态触发CSS动画来实现。
然而，在实际开发中，开发者常会遇到以下挑战：
- 动画无法重复执行： 动画在第一次触发后工作正常，但后续点击时却不再播放，或表现异常。
- 移动端兼容性问题： 动画在桌面浏览器上运行良好，但在移动设备上却无法正常显示或行为不一致。
这些问题往往源于对CSS动画机制、浏览器渲染流程以及移动端特性的理解不足。
剖析常见问题及原因
要解决上述问题，首先需要理解其背后的机制。
立即学习“Java免费学习笔记（深入）”；
1. 动画无法重复执行的原因
当一个CSS动画设置了 animation-fill-mode: forwards 属性时，动画结束后元素会保持其最终状态。如果JavaScript只是简单地再次设置 element.style.animation 或 element.style.webkitAnimation，浏览器可能会出于性能优化考虑，认为元素的动画属性没有发生实质性变化，从而不会重新播放动画。即使您在动画开始前尝试将 opacity 设置回 1，如果动画属性本身没有被“重置”，动画也可能不会重新启动。
2. 移动端兼容性问题的原因
- CSS前缀： 早期移动浏览器对CSS3属性的支持不完善，需要使用 webkit- 等厂商前缀。虽然现代浏览器已普遍支持标准属性，但为了兼容性考虑，同时提供带前缀和不带前缀的样式仍是良好实践。
- navigator.clipboard.writeText API： 这是现代Web推荐的复制文本到剪贴板的方式，相比旧的 document.execCommand('copy') 更加安全和强大。它通常需要在用户手势（如点击）的事件处理函数中调用，以获得权限。
- setSelectionRange： 对于在移动设备上程序化地选择文本，input 或 textarea 元素的 setSelectionRange(0, 99999) 方法非常关键，它确保了文本能够被正确选中并复制。
核心解决方案：基于类名切换与强制重绘
解决动画重复执行和移动端兼容性的最健壮方法是结合使用CSS类名切换和强制浏览器进行DOM重绘（reflow）。
原理：
- 类名切换： 将动画的触发逻辑封装在一个CSS类中。当需要播放动画时，将该类添加到元素上；当动画结束或需要重置时，移除该类。
- 强制重绘： 在移除动画类和重新添加动画类之间，强制浏览器进行一次DOM重绘。这会使浏览器重新计算元素的样式和布局，从而“忘记”之前的动画状态，确保动画能够被重新触发。强制重绘可以通过访问元素的某些布局相关属性（如 offsetWidth、offsetHeight、scrollWidth 等）来实现。
详细实现步骤与代码示例
我们将通过一个“复制优惠券并显示提示”的示例来演示这一解决方案。
1. HTML 结构
我们需要一个包含优惠券文本的输入框、一个触发复制操作的按钮，以及一个用于显示“已复制”提示信息的元素。
复制动画教程
优惠券中心
优惠券已复制！
2. CSS 样式 (style.css)
定义提示信息的初始隐藏状态、动画关键帧（同时包含 webkit- 前缀）以及一个用于触发动画的CSS类。为了让提示信息在动画开始时可见，并在延迟后淡出，我们将设计一个包含延迟的动画关键帧。
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative; /* 用于定位alert-coupon */
}
h1 {
color: #333;
margin-bottom: 20px;
}
.offer-right__coupon {
display: flex;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
}
.offer-right__coupon input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px; 
