Hide scrollbar during transition in Angular Animation

Question

I need help on hiding scrollbar during transition .

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

I'm trying to implement slideInfromTop on :enter and slideOutToTop on :leave . The screen which slideIn should occupy the full screen height and full screen width .

During :enter , my code works perfect . the screen smoothly slidesin with neither vertical scrollbar nor horizontal scrollbar . Scrollbars don't appear at all .

During :leave , though the screen slides out , I see scrollbars appear for a split-second . I want to get rid of that .

I don't use any css frameworks .

Please help me out

Hey @joyBlanks . Please refer this https://stackblitz.com/edit/angular-1jpxga?embed=1&file=src/index.html On Clicking on lorem ipsum text , you will see the about component kickin . I want to get rid of the scrollbars — Hariharan Seenu, Sep 24 '19 at 02:17

score 1 · Accepted Answer · answered Sep 24 '19 at 03:30

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✌

Hide scrollbar during transition in Angular Animation

1 Answers1