在角度动画中的过渡期间隐藏滚动条答案

【问题标题】：Hide scrollbar during transition in Angular Animation在角度动画中的过渡期间隐藏滚动条
【发布时间】：2019-09-24 01:19:24
【问题描述】：

我需要关于在过渡期间隐藏滚动条的帮助。

    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 框架。

请帮帮我

【问题讨论】：

你能在 stackblitz 中建立一个最小的工作示例吗
嘿@joyBlanks。请参考此stackblitz.com/edit/angular-1jpxga?embed=1&file=src/… 点击 lorem ipsum 文本，您将看到 about 组件启动。我想摆脱滚动条
检查你的答案。如果有效请标记

标签： angular scrollbar transition angular-animations

【解决方案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

现在你有了一个更干净的基地，路线动画再也不会给你带来麻烦了。

干杯✌?

【讨论】：