Animation v-if和v-else不工作时的Vue转换

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

    <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>

及

第一个tex

第二文本

我找到了解决方案。我用了两次

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>

第一特克斯

第二文本

我找到了解决方案。我用了两次

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>

第一特克斯

第二文本

我想确认您确实看到了没有动画的“第一个文本”和“第二个文本”，因为

null

作为一个名称是很奇怪的。我希望它是

未定义的

或字符串。我想确认您确实看到了没有动画的“第一个文本”和“第二个文本”，因为

null

作为一个名称是很奇怪的。我希望它是

未定义的

或字符串。

    <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>