iOS Safari 对 CSS transition 驱动的快速类切换动画兼容性差，易出现闪烁或不触发；应改用标准 CSS @keyframes 动画 + animationend 事件控制流程，避免依赖 setTimeout 和冗余 vendor prefixes。
css transform 动画在 ios safari 上失效的根源在于其对高频 class 切换 + `transition` 的渲染优化机制（如样式计算合并、重排抑制），导致 `translate3d` 等变换无法被正确捕捉和插值。本文提供一套稳定、语义清晰、无需前缀的现代解决方案。
✅ 核心问题诊断
原代码使用 setTimeout 快速切换 .counter-up → .counter-down → .counter-initial 三类，并依赖 transition 实现位移与透明度变化。该模式在 iOS 上存在两大缺陷：
- 样式重绘竞争：连续 className 赋值可能被浏览器批量合并，跳过中间状态；
- transition 触发条件苛刻：需元素已有初始样式且属性可过渡，而 display: inline-flex 在切换中可能引发布局中断，破坏过渡链。
✅ 推荐方案：CSS 动画 + JavaScript 事件驱动
将动画逻辑完全交由 @keyframes 定义，JS 仅负责添加动画类并监听结束事件，确保行为可预测：
/* 移除所有冗余 vendor prefixes —— perspective / backface-visibility / transition 均已原生支持 */
.animate-counter {
display: inline-flex;
animation: counter 0.4s ease-in-out;
}
@keyframes counter {
33% {
opacity: 0;
transform: translate(0, -10px); /* 使用 translate 而非 translate3d，更轻量 */
}
66% {
opacity: 0;
transform: translate(0, 10px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
function addLike() {
const counter = document.getElementById('counterHeart');
counter.classList.add('animate-counter');
// 精确监听动画完成，避免多次触发
counter.addEventListener('animationend', (ev) => {
if (ev.animationName === 'counter') {
counter.classList.remove('animate-counter');
}
}, { once: true });
}
⚠️ 关键注意事项
- 禁用 transition: all 干扰：.post_content_tools_button_like 中的 transition: all 0.15s ease 与动画无关，反而可能干扰 opacity/transform 的独立控制，应彻底移除；
- user-select 前缀保留必要项：仅 -webkit-user-select 在 Safari 中有效，user-select: none 为现代标准写法，二者共存即可；
- 避免 display 频繁切换：display: inline-flex 在动画类中重复声明无意义，建议保留在基础样式中（如 .counter-initial 的原始状态），动画类仅控制 opacity 和 transform；
- 动画时长建议 ≥ 0.3s：iOS 对极短动画（如原 0.05s）支持不稳定，0.4s 是兼顾流畅性与响应感的安全阈值。
✅ 最终 HTML 结构（精简可靠）
<div id="likeButton" class="post_content_tools_button_like heart" onclick="addLike()">
<span>
<i class="fa-heart me-2"></i>
<span id="counterHeart">100</span>
</span>
</div>
? 延伸建议：若需支持更复杂交互动画（如连击反馈、状态叠加），可结合 CSS.escape() 动态生成动画名，或使用 Web Animations API（element.animate()）获得更高精度控制——但对本例而言，标准 @keyframes 方案已足够健壮、可维护且全平台兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
