本文详解如何在手机端优雅实现锚点（``）标签的 hover 动画预览效果：首次触摸触发 css 动画，延时后自动跳转目标链接，避免原生点击立即跳转导致动画不可见的问题。
在移动设备（尤其是 Android Chrome）上，传统 CSS :hover 伪类几乎无效——因为触摸屏无“悬停”状态，且 标签的原生点击行为会瞬间触发导航，导致任何基于 :hover 的视觉反馈（如精灵图动画）根本来不及呈现。
一个常见但错误的思路是依赖 ontouchstart="" 或模拟“双击逻辑”（第一次加类、第二次跳转）。这不仅用户体验割裂（需精确两次点击）、代码冗余，还极易因快速连点、页面重绘延迟或事件冒泡引发状态错乱（如动画未起、跳转失效等）。
✅ 正确解法是：单次点击即启动动画，并设定合理延迟后自动跳转。既符合移动端“一次操作、明确反馈”的交互直觉，又规避了状态管理复杂性。
核心实现逻辑
- 点击时阻止默认跳转（event.preventDefault()）
- 立即添加动画类（触发 animation）
- 使用 setTimeout 在动画播放完毕后（如 3s）移除类（可选，提升复用性）
- 关键：在稍长于动画时长后（如 4s），执行 window.location 跳转
⚠️ 注意：setTimeout 回调中的 this 指向会丢失，需提前缓存 href；同时应确保动画时长与跳转延迟严格对齐。
完整可运行代码示例
<a href="https://www.php.cn/link/2cfdb14e053ad700dcb0a4eabb9147d6" id="sprite_dancer_a" class="sprite_dancer"> aタグ（带精灵动画） </a>
.sprite_dancer {
display: inline-block;
background-image: url("../img/test-image.png");
width: 213px;
height: 190px;
background-position: 0 0;
/* 移动端需显式启用硬件加速以保障动画流畅 */
will-change: background-position;
}
.sprite_dancer.animating {
animation: sprite 3s steps(10) forwards; /* 3s 动画，forwards 保持最终帧 */
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -2130px 0; }
}$(".sprite_dancer").on("click", function(event) {
event.preventDefault();
const $el = $(this);
const targetUrl = $el.attr("href");
// 启动动画
$el.addClass("animating");
// 3秒后移除动画类（可选：便于下次点击复用）
setTimeout(() => {
$el.removeClass("animating");
}, 3000);
// 4秒后跳转（确保动画完整播放后执行）
setTimeout(() => {
window.location.href = targetUrl;
}, 4000);
});进阶优化建议
- ✅ 兼容性增强：为非 JS 环境提供降级——移除 event.preventDefault() 并添加 ，确保基础链接仍可用。
- ✅ 性能优化：使用 transform 或 opacity 替代 background-position 动画（更高效），或改用 CSS @property + transition 实现平滑位移。
- ✅ 体验增强：添加轻量级点击反馈（如 scale(0.98) 过渡），让用户明确“已响应”。
- ❌ 避免陷阱：不要用 :active 伪类替代——它仅在触摸期间生效，无法持续展示动画；也不要依赖 ontouchstart 直接操作 :hover——CSS 伪类在移动端无实际意义。
总结：移动端的“hover 效果”本质是用户意图确认后的视觉反馈+延时动作。放弃对 :hover 的执念，拥抱 class 控制 + setTimeout 编排，即可简洁、可靠、高性能地达成目标。
