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

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

0 голосов
/ 18 октября 2019

Gday! Я делаю мобильное приложение, используя квазар и Vue. Я хочу сделать плавный переход между страницами, подобными ios, но это работает только тогда, когда я задаю страницы, не принадлежащие дочерним маршрутам.

Пожалуйста, см. Код ниже. между входом в систему и регистрацией, вход в систему и home работают как ожидание (обычный маршрут), но между фронтом и поиском не анимируются должным образом (страницы в дочернем маршруте), анимация новой страницы на белой странице, которая уже удалена системой. Казалось, 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);
  }
}

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

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

...