防止滚动条出现在变换上：使用 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供您自己尝试

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 回调中。