Vue router in-out Page transition: переход на новый маршрут, в то время как старый маршрут остается видимым

Vue router in-out Page transition: переход на новый маршрут, в то время как старый маршрут остается видимым

08.10.2019 02:45:06 Просмотров 94 Источник

Чтобы проиллюстрировать то, что я пытаюсь достичь, но также обсудить и узнать о каждом механизме отдельно, я разделил проблему на две независимые задачи:

1. Сохраняйте предыдущий маршрут видимым до тех пор, пока не появится новый маршрут

Ли переход сползая, то, что я здесь, или просто потертости; режим in-out не работает, как я ожидаю его, а именно, что существующий маршрут остается видимым до следующего маршрута завершил переход (например, обложил себя за предыдущей), точно так, как показано в последнем примере этого раздела https://vuejs.org/v2/guide/transitions.html#Transition-Modes, показывая две кнопки с in-out режиме. Вместо этого никакого перехода не происходит, но он просто переворачивает маршруты статически в половине заданного времени перехода.

Есть ли какая-либо оговорка с маршрутами и очевидная причина, по которой это не будет работать одинаково, например, что один router-viewможет содержать только один в то время, и поэтому вход-выход невозможен?

Редактирование 1:

Я понял, что in-outбудет работать только с position:absoluteна обоих элементах,иначе они не будут накладываться. Любая идея, как я мог бы элегантно включить такое поведение, потенциально устанавливая это абсолютное положение только во время перехода маршрутизатора?

Текущий хак, который имеет визуальный слайд-вверх модальный эффект (режим: in-out) Я ищу: добавление style="position:absolute; z-index:2100"к диалоговому маршруту. Затем мне нужно будет изменить базовый переход, как только он будет показан, чтобы иметь обратный эффект скрытия (режим: out-in).

Также см. редактирование 2 ниже.


2. Создание модальной страницы (маршрута), которая открывается над другой существующей страницей при переходе к

Я попытался взломать это поведение, добавив второй маршрутизатор-представление в приложении.вю

<router-view />
<router-view name="dialog" />

Конкретный компонент добавляется к моим маршрутам следующим образом

{
    path: 'records/new',
    components: {
      dialog: () => import('layouts/NewRecord.vue')
    },
    children: [
      {
        name: 'new-record',
        path: '',
        component: () =>
          import('src/pages/NewRecord.vue')
      }
    ]
  }

Я не уверен, что этот подход даже имеет смысл, но я не мог заставить его работать должным образом. Цель состояла бы в том, чтобы просто наложить другое router-view name="dialogвсякий раз, когда "диалог"-путь нажат, поэтому, пока он может быть анимирован (слайд-вверх), другой вид маршрутизатора остается видимым ниже. В конце концов, я думаю, что здесь я столкнулся с той же проблемой: как только маршрут изменяется, начальное представление маршрутизатора отбрасывает свой компонент, потому что путь больше не соответствует текущему местоположению.

В любом случае, есть люди с большим опытом и знаниями, поэтому я надеюсь, что смогу проиллюстрировать то, что я пытаюсь достичь, и мне просто любопытно и благодарно читать ваши материалы.

Правка 2

Я мог бы заставить его работать так , как я хотел, просто с одним, завернутым в пользовательский компонент перехода страницы. Это довольно Хак, хотя и мне нужно было добавить position:absoluteк макетам страниц may, ко всем из них на самом деле (как" выходящий", так и" входящий " компонент нуждаются position: absolute) при отображении диалогового компонента. Я уверен, что есть лучший способ, но я не нашел его до сих пор.

Пользовательский компонент перехода страницы:

position: absolute

Ответы - Vue router in-out Page transition: переход на новый маршрут, в то время как старый маршрут остается видимым / Vue router in-out page transition: transition in a new route while old route remains visible

Phil

08.10.2019 03:11:26

Для вопроса 1: Вы добавили CSS с ним? Переход сам по себе только обрабатывает время, вам нужно добавить CSS для перехода к работе (пример: https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components ).

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

По вопросу 2: Я не знаю, правильно ли я понял вашу ситуацию, но если бы я это сделал, вот что я бы сделал, используя вложенные маршруты.

макеты/новой записи.вю

<template>
  <router-view name="dialog"></dialog>
</template> 

Маршруты

const routes = {
  path: 'records/new',
  component: () => import('layouts/NewRecord.vue'),
  children: [
    {
      path: 'dialog',
      components: {
        dialog: () => import('src/pages/NewRecord.vue'),
      },
    },
  ],
}
https://stackoverflow.com/questions/58278430/vue-router-in-out-page-transition-transition-in-a-new-route-while-old-route-rem/58278607#comment102976994_58278607
Я имел право css, но вижу мое добавленное редактирование 1. На самом деле проблема с in-out связана с позицией.
Kasheftin

20.10.2019 03:56:56

У меня есть аналогичная задача. Я смог завершить его с помощью фиксированных контейнеров и z-index shuffle. Я столкнулся с рядом проблем, связанных с прокруткой и вертикальным выравниванием, и в моем случае решение его с использованием абсолютного положения во время перехода маршрутизатора было невозможно.

Вот демо: https://kasheftin.github.io/vue-router-in-out-slide-scroll. Кроме того, мне пришлось использовать localStorage для сохранения и восстановления позиции прокрутки страницы.

В моем случае содержимое страницы должно быть выровнено по вертикали. Вот почему я не мог использовать один глобальный прокручиваемый контейнер (например<body>). Переход в режим in-out работает довольно просто - он просто добавляет содержимое, добавляет некоторые классы, а затем удаляет первого ребенка. Это означает, что в середине есть два контейнера страниц бок о бок, и если один из них высок (и заставляет тело иметь прокрутку), то другой появляется в середине тела и имеет неправильное вертикальное выравнивание.

Поэтому я просто обернул каждую страницу фиксированным прокручиваемым контейнером. Предположим, у нас есть Listи Item

Анимация слева направо (наложение исчезает) имеет неправильный z-индекс. Во время анимации мы имеем следующее в дом:

.slide-right-enter-active {
  transition: transform 1s ease;

.slide-right-enter {
  transform: translateX(100%);
}

По умолчанию Listбудет отображаться над List, но он должен быть ниже. Так что есть правила:

Item
Закрыть X