Question

我在过渡期间隐藏滚动条方面需要帮助。

    trigger("routeFadeState", [
  transition(":enter", [
    style({
      transform: "translateY(-100vh)"
    }),
    animate("1000ms ease-out")
  ]),
  transition(":leave",
    animate(
      "500ms",
      style({
        transform: "translateY(-100vh)",
        overflow: hidden
      })
    )
  )
]);

我正在尝试在：enter上实现slideInfromTop，在：leave上实现slideOutToTop。 slideIn的屏幕应占据全屏高度和全屏宽度。

在：输入期间，我的代码运行完美。屏幕既没有垂直滚动条也没有水平滚动条顺利滑动。滚动条根本不会出现。

：离开期间，尽管屏幕滑出，但我看到滚动条出现了一秒钟。我想摆脱它。

我不使用任何CSS框架。

请帮助我

Answer 1

有很多项可导致滚动条。

html主体默认具有一定的余量，并且填充会在全局CSS中首先使它们丢失

html, body {
  margin: 0;
  padding: 0;
}

在您的全局样式中，我将position:absolute部分添加到将要加载到的所有组件中，因此所有组件都将绝对定位，因此您无需转到每个组件并编写position: absolute，display: block，width和height。路由组件的全局CSS样式如下：

router-outlet + * {
  position: absolute;
  display: block;
  height: 100vh;
  width: 100vw;
}

更新组件CSS（可选）。现在，您的组件CSS变得简单了：

Home (CSS)                      |  About (CSS)
:host {                         |  :host { 
  background-color: yellow;     |    background-color: red;
}                               |  }

最后一件臭名昭著的事情：丢失
标签或失去利润（总是让我的头好），请使用
标签。它们以某种方式影响整体页边距。

更新后的Stackblitz：https://stackblitz.com/edit/angular-qdxphn

现在您的基础更加简洁了，路线动画将再也不会困扰您。

干杯✌?

在Angular Animation过渡期间隐藏滚动条

1 个答案: