Tailwind hover:pause移动端动画恢复异常，求触摸松开即恢复方案

问题核心是移动端浏览器会将单次点击模拟为hover状态，导致hover:pause的暂停效果会一直保持，直到用户点击其他区域。要实现触摸时暂停、松开时恢复，需要结合JavaScript监听触摸事件来控制动画状态。

步骤1：给滑块元素添加可识别的标识 #

修改你的className，增加一个ID或者类名方便JS选择元素：

<div className="animate-infinite-slider hover:pause" id="infinite-slider">
  <!-- 滑块内容 -->
</div>

步骤2：添加触摸事件监听代码 #

在页面中加入以下JavaScript代码，监听触摸开始和结束事件：

const slider = document.getElementById('infinite-slider');

// 触摸开始时暂停动画
slider.addEventListener('touchstart', () => {
  slider.classList.add('pause');
});

// 触摸结束时恢复动画
slider.addEventListener('touchend', () => {
  slider.classList.remove('pause');
});

为什么hoverOnlyWhenSupported无效？ #

这个配置是用来在不支持hover的设备上禁用hover样式，但移动端浏览器是支持hover模拟的（通过点击触发），所以这个配置不会改变当前的问题表现。

框架适配（以React为例） #

如果你使用React等前端框架，可以用Ref和生命周期钩子实现相同逻辑：

import { useEffect, useRef } from 'react';

function InfiniteSlider() {
  const sliderRef = useRef(null);

  useEffect(() => {
    const slider = sliderRef.current;
    if (!slider) return;

    const handleTouchStart = () => slider.classList.add('pause');
    const handleTouchEnd = () => slider.classList.remove('pause');

    slider.addEventListener('touchstart', handleTouchStart);
    slider.addEventListener('touchend', handleTouchEnd);

    return () => {
      slider.removeEventListener('touchstart', handleTouchStart);
      slider.removeEventListener('touchend', handleTouchEnd);
    };
  }, []);

  return (
    <div ref={sliderRef} className="animate-infinite-slider hover:pause">
      {/* 滑块内容 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Torkil