@shsv382

Как заставить Vue-router работать до завершения анимации?

Имеется SPA на Vue-JS, несколько разделов сайта, переход между которыми осуществляется с помощью Vue Router.
Есть главная страница, для которой установлена фоновая картинка, а также анимация (медленное увеличение этой картинки)
.home-page {
  background-size: cover;
  background-size: 100%;
  background-position: center top;
  background-attachment: fixed;
  animation: main-page-bg 35s ease-in-out infinite alternate;
  background-image: url('img/main-background-768.jpg');
  @media (min-width: 768px) {
    background-image: url('img/main-background-1280.jpg');
  }
  @media (min-width: 1280px) {
    background-image: url('img/main-background-1920.jpg');
  }
  @media (min-width: 1920px) {
    background-image: url('img/main-background-2560.jpg');
  }
  @media (min-width: 2560px) {
    background-image: url('img/main-background.jpg');
  }
}

@keyframes main-page-bg {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 140%;
  }
}


Почему-то Vue-router переходит с главной страницы на любой другой раздел сайта только после окончания прохода анимации (если сразу нажать на ссылку, то через 35-37 секунд, если через 10 секунд - через 25 секунд и тд), причем главная страница с фоном исчезает сразу, а компонент новой страницы отображается только после конца анимации.

Кто сталкивался с таким?
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы