Vue JS 导航栏不需要的过渡答案

【问题标题】：Vue JS navbar unwanted transitionVue JS 导航栏不需要的过渡
【发布时间】：2020-07-05 21:09:03
【问题描述】：

我制作了一个具有绝对定位的导航栏，并向<router-view> 添加了淡出过渡，但是当视图过渡时，导航栏也有一个奇怪的、不合时宜的淡出过渡。为什么要转换 <transition> 包装器之外的元素，以及如何解决此问题？

这是我的代码：

<template>
    <div id="app">
        <ol class="navbar">
            <nav class="active-slider-holder">
                <router-link @click.native="activeElement1" to="/">Rooms</router-link>
                <router-link @click.native="activeElement2" to="ss">People</router-link>
                <router-link @click.native="activeElement3" to="ww">About</router-link>
                <div id="active-slider"></div>
            </nav>
        </ol>

        <transition name="fade-out" appear>
            <router-view></router-view>
        </transition>
    </div>
</template>

【问题讨论】：

您可以将您的 CSS 添加到问题中吗？它应该看起来像这样：.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
是的，几乎就是这样：.fade-out-enter-active,.fade-out-leave-active { transition: all 1.5s; } .fade-out-enter, .fade-out-leave-to { opacity: 0; }

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

我通过在导航栏元素中添加z-index 来解决此问题¯\_(ツ)_/¯

【讨论】：