css‘s hover VS mobile

.animation {
  animation: 30s move infinite linear;
  /* &:hover {
    animation-play-state: paused;
  */
}

原本写的好好的,测试说:“移动端点击滚动条,跳转到其他页面后,返回当前页面,滚动条不滚动;可以优化位点击后继续滚动”

哎,改吧!

<div
   // onTouchStart={() => setPause(true)}
   // onTouchEnd={() => setPause(false)}
   onMouseEnter={() => setPause(true)}
   onMouseLeave={() => setPause(false)}
   style={{ animationPlayState: pause ? 'paused' : 'running' }}
>
>...</div>

为了防止测试再提:“在PC端,点击链接跳转到另一个页面,x掉另一个页面,浏览器窗口又回到当前页面,滚动条不滚动” 添加当该页面出现在浏览器窗口时,就让滚动条滚动

  useEffect(() => {
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
      } else {
        setPause(false)
      }
    });
  }, [])

你可能感兴趣的:(服务器,运维)