时间戳

首页 > 解决方案 > 在角度动画中的过渡期间隐藏滚动条

angular - 在角度动画中的过渡期间隐藏滚动条

问题描述

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

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

请帮帮我

在此处输入图像描述

标签： angularscrollbartransitionangular-animations

解决方案

There are many items which lead to the scrollbars.

  • The html body defaults to some margin and padding lose them first in your global CSS
html, body {
  margin: 0;
  padding: 0;
}
  • In your global styles I added the position:absolute part to all component that will be loaded in the <router-outlet> so all component will be positioned absolutely so you don't have to go to each component and write position: absolute, display: block, width and height. Your styles for your global css for your routed component as follows
router-outlet + * {
  position: absolute;
  display: block;
  height: 100vh;
  width: 100vw;
}
  • Update your component CSS (Optional). So now your components CSS become simple:
Home (CSS)                      |  About (CSS)
:host {                         |  :host { 
  background-color: yellow;     |    background-color: red;
}                               |  }
  • Last thing the notorious one: Lose the <p> tags or lose their margins (always bangs my head good) use <div> tags. They impact the overall page margin somehow.

Updated Stackblitz: https://stackblitz.com/edit/angular-qdxphn

Now you have a much cleaner base and route animations will never trouble you again.

Cheers✌</p>

推荐阅读