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

Question

[shsv382]

Имеется 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 секунд и тд), причем главная страница с фоном исчезает сразу, а компонент новой страницы отображается только после конца анимации.

Кто сталкивался с таким?

Comments

[Aetae]

Не, эт безумие, сделай пример на codepen\jsfiddle глянем.:)
(можешь форкнуть этот чтоб не возиться с добавлением библиотек)

[Виктор Кожухарь]

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

.paused{
    animation-play-state:paused;
}

[shsv382]

Aetae Виктор Кожухарь спасибо, что откликнулись, помог один из GPT-ботов.

Дело в том, что анимация была добавлена в компонент-страницу (page), то есть в компонент, который был указан в ключе component в роутере, и поэтому блокировала переход между разделами сайта через Vue Router.

Решение проблемы - вынесение div'а с фоном в отдельный компонент и вставка в него содержимого главной страницы через slot