在 Angular 动画的过渡期间隐藏滚动条

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 的屏幕应该占据全屏高度和全屏宽度。

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

在 :leave 期间，虽然屏幕滑出，但我看到滚动条出现了一瞬间。我想摆脱那个。

我不使用任何 css 框架。

请帮帮我

Answer 1

有很多项导致滚动条。

html body 默认有一些 margin 和 padding 在全局 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 动画的过渡期间隐藏滚动条

Hide scrollbar during transition in Angular Animation

transition

scrollbar

angular

angular-animations