Vue Переход маршрутизатора на основе разной глубины для той же ссылки в другом сценарии - PullRequest
Новая
       19

Vue Переход маршрутизатора на основе разной глубины для той же ссылки в другом сценарии

0 голосов
/ 28 апреля 2020

Итак, эта идея взята из собственной документации Vue, в зависимости от глубины .path, при которой будут происходить переходы между страницами. Выглядит это так: 

const toDepth = to.path.split("/").length;
const fromDepth = from.path.split("/").length;

this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left";

Довольно простой, но крутой эффект! Но сейчас происходит что-то странное (или я что-то упускаю)

У меня есть песочница с приложением Vue: https://codesandbox.io/s/vuepoc-etqvg

Сценарий 1
- Перейдите на страницу / день / подробности (нажмите «День X», а затем «Детали»)
- Нажмите «Отмена» в левом верхнем углу, она будет скользить out влево

Сценарий 2
- снова перейти на страницу / день / подробности
- Нажмите " Расходы "
- Нажмите" Назад ", чтобы go вернуться к Detais
- Нажмите" Отмена "в левом верхнем углу, теперь она выдвинется вправо * 1034". *

Мне бы хотелось, чтобы детали всегда выдвигались вправо (Сценарий 2), но не понимаю, как я это делаю. css выглядит так: 

.slide-right-enter {
  transform: translateX(-400px);
}

.slide-right-enter-to {
  transform: translateX(0);
}

.slide-right-leave {
  transform: translateX(0);
}

.slide-right-leave-to {
  transform: translateX(400px);
}

.slide-left-enter {
  transform: translateX(400px);
}

.slide-left-enter-to {
  transform: translateX(0);
}

.slide-left-leave {
  transform: translateX(0);
}

.slide-left-leave-to {
  transform: translateX(-400px);
}

У кого-нибудь есть идеи?

...