Предыдущая страница удаляется при переходе между страницами в дочерних элементах маршрута
День добрый! Я делаю мобильное приложение с помощью quasar и Vue Я хочу сделать плавный переход между страницами, такими как ios, но он работает только тогда, когда я устанавливаю страницы не в Route children.
Пожалуйста, смотрите код ниже. между логином и регистрацией, логином и домом работают как ожидание (обычный маршрут) но между фронтом и поиском не анимируются должным образом (страницы в детском маршруте) новая страница анимируется поверх белой страницы, которая уже удалена системой. казалось, что Vue удалил предыдущую страницу, когда переход сработал. Пожалуйста, проверьте снимок экрана 1,2
это мой маршрут
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ 'pages/Login.vue'),
},
{
path: '/register',
name: 'register',
component: () => import(/* webpackChunkName: "register" */ 'pages/Register.vue'),
},
{
path: '/home',
name: 'home',
component: () => import('layouts/Home.vue'),
children: [
{
path: '/',
name: 'front',
components: { Pages: Front },
},
{
path: '/search',
name: 'search',
components: { Pages: Search }
},
}
}
и это мой css
.next-leave-to {
background-color: white;
position: absolute;
width: 100%;
animation: leaveToLeft 5500ms both cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 0;
}
.next-enter-to {
background-color: white;
position: absolute;
width: 100%;
animation: enterFromRight 5500ms both cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1;
}
.prev-leave-to {
background-color: white;
position: absolute;
width: 100%;
animation: leaveToRight 5500ms both cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1;
}
.prev-enter-to {
background-color: white;
position: absolute;
width: 100%;
animation: enterFromLeft 5500ms both cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 0;
}
@keyframes leaveToLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-25%);
filter: brightness(0.5);
}
}
@keyframes enterFromLeft {
from {
transform: translateX(-25%);
filter: brightness(0.5);
}
to {
transform: translateX(0);
}
}
@keyframes leaveToRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes enterFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
Ответы - Предыдущая страница удаляется при переходе между страницами в дочерних элементах маршрута / Previous page removed when transit between pages in route children
Помочь в развитии проекта: