Скрыть полосу прокрутки во время перехода в Angular Animation - PullRequest
Новая
       52

Скрыть полосу прокрутки во время перехода в Angular Animation

0 голосов
/ 24 сентября 2019

Мне нужна помощь по скрытию полосы прокрутки во время перехода.

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

Я пытаюсь реализовать slideInfromTop on: enter и slideOutToTop on: оставить.Экран, на котором выполняется слайд, должен занимать всю высоту экрана и полную ширину экрана.

Во время: введите, мой код работает отлично.экран плавно скользит без вертикальной или горизонтальной полосы прокрутки.Полосы прокрутки не отображаются вообще.

Во время: оставить, хотя экран выдвигается, я вижу полосы прокрутки появляются на долю секунды.Я хочу избавиться от этого.

Я не использую никаких CSS-фреймворков.

Пожалуйста, помогите мне

enter image description here

1 Ответ

0 голосов
/ 24 сентября 2019

Есть много элементов, которые ведут к полосам прокрутки.

  • В теле 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

Теперь у вас гораздо более чистая база, и анимация маршрута больше не будет вас беспокоить.

Приветствия✌?

...