vue router animations

animations.js

import { animate } from "@okikio/animate";
// import anime from 'animejs/lib/anime.es.js';

//transitions using animate
//animates end event is `onfinish`
function fadeIn(el, done) {
  animate({
    targets: el,
    opacity: [0, 1],
    easing: 'easeInOutSine',
    onfinish: done
  })
}
function fadeOut(el, done) {
  animate({
    targets: el,
    opacity: [1, 0],
    easing: 'easeInOutSine',
    onfinish: done
  })
}
//end

//transitions using animejs
//animejs end event is `complete`
function useFadeIn(el, done) {
  console.log(el)
  anime({
    targets: el,
    opacity: [0, 1],
    easing: 'easeInOutSine',
    complete: done,
  })
}

function useFadeOut(el, done) {
  anime({
    targets: el,
    opacity: [1, 0],
    easing: 'easeInOutSine',
    complete: done,
  })
}

export {
  fadeIn, fadeOut,
  // useFadeOut, useFadeIn
}

App.vue

<template>
  <div>
    <nav-bar />
    <router-view v-slot="{ Component }">
      <transition @enter="fadeIn" @leave="fadeOut" v-bind:css="false" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script>
import navigation from '@components/navigation.vue'
import { fadeIn, fadeOut } from './animations.js'
export default {
  components: {
    "nav-bar": navigation,
  },
  setup() {

    return {
      fadeIn, fadeOut,
    }
  }
}

</script>

<style>

</style>

navbar.vue

<template>
    <div class="navbar mb-2 shadow-lg bg-neutral text-neutral-content rounded-box">
        <div class="px-2 mx-2 navbar-start">
            <span class="text-lg font-bold">navbar</span>
        </div>
        <div class="navbar-center px-2 mx-2 lg:flex">
            <div class="flex items-stretch">
                <router-link
                    tag="a"
                    class="btn btn-ghost btn-sm rounded-btn"
                    v-for="route in allRoutes"
                    :key="route"
                    :to="route.path"
                >{{ route.meta.title }}</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { useRouter } from "vue-router"
export default {


    setup() {
        const router = useRouter();
        const allRoutes = router.getRoutes().filter(o => o.name !== 'notFound');

        return {
            allRoutes
        }
    }
}
</script>

<style>
</style>