Vue переход работает при просмотре маршрутизатора, но не внутри компонента - PullRequest
Новая
       33

Vue переход работает при просмотре маршрутизатора, но не внутри компонента

0 голосов
/ 21 февраля 2020

Когда я настраиваю типичный переход по маршруту, все работает как положено 

<transition name="view" mode="out-in">
  <router-view />
</transition>

Но если я пытаюсь вместо этого поместить переход в представление, переход не будет работать 

<template>
  <transition name="view" mode="out-in">
    <main>
      <...>
    </main>
  </transition>
</template>

Есть идеи, почему это может иметь место?

1 Ответ

0 голосов
/ 21 февраля 2020

Проблема, как мне кажется, в том, что элемент <main> не входит и не уходит, поэтому не анимируется. Вы, вероятно, пытаетесь анимировать что-то внутри элемента <main>, на которое не нацелен псевдоэлемент <transition>.

, я предлагаю инкапсулировать элемент, который переключается (v-if) или переключение видимости (v-show) с transition

<template>
  <main>
    <transition name="view" mode="out-in">
      <...something with a v-if or a v-show>
    </transition>
  </main>
</template>

Кроме того, если вы используете список / массив (v-for), вам следует использовать transition-group

документы : https://vuejs.org/v2/guide/transitions.html

...