Есть несколько способов решения данной проблемы:
1. Использование хука `beforeRouteLeave` в компоненте, который отвечает за анимацию. В этом хуке можно добавить условие ожидания завершения анимации перед переходом на новую страницу. Например:
```javascript
beforeRouteLeave (to, from, next) {
// Запуск анимации
this.runAnimation().then(() => {
next();
})
}
```
2. Использование `setTimeout` для ожидания завершения анимации перед перенаправлением страницы. Например:
```javascript
methods: {
navigateToNewPage() {
this.runAnimation();
setTimeout(() => {
this.$router.push('/new-page');
}, 1000); // время выполнения анимации
}
}
```
3. Использование библиотеки `vue-transition-controller`, которая позволяет управлять временем анимации при переходе между страницами. Например:
```javascript
import { transitionController } from 'vue-transition-controller';
export default {
onEnter() {
return transitionController.wait();
},
methods: {
navigateToNewPage() {
this.runAnimation();
transitionController.finish();
this.$router.push('/new-page');
}
}
}
```
Выбор конкретного способа зависит от структуры вашего приложения и предпочтений разработчика.