Vue 过渡与 v-if 和 v-else 不工作

Question

我无法使用过渡或过渡组添加动画。我有代码：

    <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div key=1 v-if="$route.name !== null">
            <router-view></router-view>
        </div>
        <div v-else key=2>
            <p>First text</p>
            <p>Second text</p>
        </div>
    </transition>

从 transtition 到 transition-group 的更改无济于事。过渡应该包围：

<div v-if="$route.name !== null">
   <router-view></router-view>
</div>

和

<p>First tex</p>
<p>Second text</p>

Answer 1

我找到了解决方案。我用了两次 transition。我不知道我是否应该这样做，但现在可以了。

    <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <div key="save" v-if="$route.name !== null">
             <transition mode="out-in" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <router-view></router-view>
            </transition>
        </div>
        <div v-else key="edit">
           <p>First tex</p>
           <p>Second text</p>
        </div>
    </transition>

Vue 过渡与 v-if 和 v-else 不工作

Vue transition with v-if and v-else not working

animation

transition

vue.js