javascript - 防止滚动条出现在变换上：使用 React-Spring 进行翻译

Question

每当我将translate()CSS 函数添加到元素将离开视口的react-spring useTransition钩子from或leave属性时，我都会得到一个垂直/水平滚动条。

const transitions = useTransition(show, null, {
    from: {
        opacity: 0,
        transform: "translate3d(500px,0px,0px) scale(1)"
    },
    enter: {
        opacity: 1,
        transform: "translate3d(0px,0px,0px) scale(1)"
    },
    leave: {
        opacity: 0,
        transform: "translate3d(0px,-500px,0px) scale(1)"
    },
    config: {
        duration: 3000
    }
});

我知道这是意料之中的，一般的解决方案是添加overflow: hidden到body.

但是我不确定在动画发生时如何执行此操作？因为我不想一直添加overflow: hidden，body因为我确实需要访问某些页面中的滚动条，而不是在动画启动时？

这是一个CodeSandbox供您自己尝试

任何帮助将不胜感激。

标签： javascriptcssreactjscss-transformsreact-spring

Answer 1

您可以使用 document.body.classList.add 和 remove 更改正文的类。例如，您可以再添加一个 useEffect，如下所示：

  useEffect(() => {
    if (show) {
      document.body.classList.add("animation");
    } else {
      document.body.classList.remove("animation");
    }
  }, [show]);

当然，您必须为班级定义您的风格：

.animation {
  overflow: hidden;
}

请参阅此处的示例。 https://codesandbox.io/s/react-spring-scroll-fj6t8

这只是一个粗略的例子。您可以将 classList.remove 添加到 useEffect 的返回中。或者，如果您想在动画停止时将其移除，您可以尝试将其添加到 useTransition 的 onRest 回调中。