Vue JS navbar нежелательный переход

Question

Я сделал навигационную панель с абсолютным позиционированием и добавил переход с постепенным исчезновением к <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>

Answer 1

Я исправил проблему, добавив z-index к моему элементу navbar ¯ \ _ (ツ) _ / ¯