Как сделать индивидуальный переход для каждого компонента?

Question

У меня есть 3 компонента, которые я хочу показать эффект перехода, когда они входят / выходят.

Есть 1 "основной" компонент, а 2 других отображаются при нажатии соответствующей кнопки. Мой текущий пример кода здесь: https://jsfiddle.net/5aq1k05L/

<transition :name="'step_' + currentView" mode="out-in">
  <component :is="currentView"></component>
</transition>

CSS:

.step_componentA-enter-active {
  transition: transform 0.4s;
}

.step_componentA-leave-active {
  transition: transform 0s;
}

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

.step_mainComponent-leave-active {
  transition: transform 0.3s;
}

.step_mainComponent-leave-to {
  transform: translateX(-100%);
}

.step_componentB-enter-active {
  transition: transform 0.4s;
}

.step_componentB-leave-active {
  transition: transform 0s;
}

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

Что я пытаюсь сделать:

Когда я нажимаю на кнопку "componentA", я хочу, чтобы этот компонент скользил слева, в то время как "mainComponent" все еще виден на заднем плане (не отделен от элементов, как сейчас) во время перехода.

То же самое для "componentB", за исключением того, что он будет скользить справа и будет возвращаться вправо при нажатии назад.

Что мне не хватает? https://jsfiddle.net/5aq1k05L/

Answer 1

Изменить 2:

Вот рабочий пример с componentA а также componentB которые скользят по mainComponent -> https://jsfiddle.net/5aq1k05L/8/

Я изменил переход на mode:in-outЯ добавил z-index для каждого компонента, и положить компоненты в position:absolute и приложение в position:relative

---

Редактировать:

Вот рабочий пример для вашего случая -> https://jsfiddle.net/5aq1k05L/4/

---

Когда вы анализируете скрипт шаг за шагом, вы видите, что класс, когда componentB уходит step_mainComponent-leave-active step_mainComponent-leave-to что он делает классический тумблер относительно mainComponent стиль.

Если вы хотите использовать разные анимации, вы должны использовать enter-active-class а также leave-active-class и т. д. (см. подробнее здесь) - или поместите две переменные в nameЯ думаю, с динамическим значением относительно предыдущего представления, в магазине, как currentView является.

Это может быть так:

<transition
    :name="'step_' + currentView + '_from_' + prevView" 
    mode="out-in"
  >

В магазине (вам также потребуется обновить состояния, mapState и т. Д.):

SET_CURRENT_VIEW(state, new_currentView) {
  state.prevView = state.currentView;
  state.currentView = new_currentView;
}

Надеюсь, это поможет вам