Предыдущая страница удаляется при переходе между страницами в дочерних элементах маршрута

День добрый! Я делаю мобильное приложение с помощью 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);
  }
}

между логином и регистрацией

между фронтом и поиском в доме детей