Transition inside route transition

[DannyZednickova]

I am using transition for my routing components as bellow:

<template>
  <div class="bg-container">
    <div class="navigation">
      <div class="nav">
        <ul class="navi">
          <li>
            <router-link to="/"> Home</router-link>
          </li>
          <li>
            <router-link to="/info"> Info</router-link>
          </li>
          <li>
            <router-link to="/actions"> Akce</router-link>

          </li>
          <li>
            <router-link to="/contacts"> Kontakt</router-link>
          </li>

        </ul>
      </div>

    </div>

    <router-view v-slot="{ Component } ">
      <transition name="fade" mode="out-in" appear >
        <component  :is="Component"></component>
      </transition>
    </router-view>
 </div>

</template>
<script>

export default {
  name: "Navigation",
  
}
</script>

<style lang="scss">


.fade-enter-from{
  opacity:0
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-out;
}

.fade-leave-to{
opacity: 1;
}



</style>

But once i want to use another transition in any particular component i use the router for, it does not work at all. What am I missing?