成帧器运动动画期间出现滚动条？

Question

通过类似

的变体将图像或组件从远离屏幕一侧的位置带入屏幕

const containerVariants = {
    hidden: {opacity : 0, x: '-100vw'},
    visible: {opacity : 1, x : 0}
  }

如果初始隐藏而动画可见，将导致滚动条出现。我没有看到滚动条出现在我观看的教程中，知道为什么会发生这种情况或者如何防止滚动条出现？ 在成帧器运动期间会出现滚动条，这似乎违反直觉，否则我如何将对象滑入视图中。

Answer 1

我遇到了同样的问题，通过删除“overflow: auto;”解决了来自我的动画组件容器的 CSS。

Answer 2

如果您想显式删除滚动条的出现，您需要将

overflow: hidden;

添加到该元素的样式中，并确保有指定的高度。

Answer 3

发生这种情况是由于您为隐藏状态提供的 x 值或 y 值。这些值将元素推到正常宽度之外，因为当您滚动到它时，您无法观察到这种行为，这使它成为一个真正令人头疼的问题。我个人找到了一个解决方法，将隐藏时的宽度和高度设置为 0，并为父容器设置溢出：隐藏。

    export function slideInFromLeft(delay: number) {
  return {
    hidden: { x: -1500, width: 0, height: 0, opacity: 0 },
    visible: {
      x: 0,
      width: "100%",
      height: "100%",
      opacity: 1,
      transition: {
        delay: delay,
        duration: 0.5,
      },
    },
  };
}

export function slideInFromRight(delay: number) {
  return {
    hidden: { x: 1500, width: 0, height: 0, opacity: 0 },
    visible: {
      x: 0,
      width: "100%",
      height: "100%",
      opacity: 1,
      transition: {
        delay: delay,
        duration: 0.5,
      },
    },
  };
}

对于父容器：

.parentContainer {
overflow: hidden
}