vue3路由过渡动画

<template>

  <div>

    <!-- <router-view id="router" /> -->

    <loading :routename="isname" />

    <router-view v-slot="{ Component }" id="router">

      <transition :name="transitionName">

        <keep-alive include="ProductList">

          <component :is="Component" />

        </keep-alive>

      </transition>

    </router-view>

    <TabBar

      style="position: absolute !important; left: 0; right: 0; bottom: 0;height:60px;z-index:100"

    />

  </div>

</template>

<script>

import TabBar from './components/tabbar.vue'

import { ref } from 'vue'

import { onBeforeRouteUpdate, useRoute } from 'vue-router'

import { Loading } from 'vant'

import loading from '@/components/loading'

export default {

  name: 'Home',

  components: {

    TabBar,

    [Loading.name]: Loading,

    loading

  },

  setup () {

    // const router = useRouter()

    const route = useRoute()

    const isname = ref(route.name)

    const transitionName = ref('slide-left')

    onBeforeRouteUpdate((to, from) => {

      const { index: toIndex } = to.meta

      const { index: fromIndex } = from.meta

      console.log(toIndex, fromIndex, toIndex < fromIndex)

      transitionName.value = toIndex < fromIndex ? 'slide-right' : 'slide-left'

      console.log(transitionName.value)

      isname.value = to.name

    })

    return {

      transitionName,

      isname

    }

  }

}

</script>

<style lang="scss" scoped>

#router {

  height: calc(100vh - 50px);

  overflow-y: auto;

}

.slide-right-enter-active,

.slide-right-leave-active,

.slide-left-enter-active,

.slide-left-leave-active {

   100vw;

  will-change: transform;

  transition: all 500ms;

  // position: absolute;

}

.slide-right-enter {

  opacity: 0;

  transform: translate3d(-100%, 0, 0);

}

.slide-right-leave-active {

  opacity: 0;

  transform: translate3d(100%, 0, 0);

}

.slide-left-enter {

  opacity: 0;

  transform: translate3d(100%, 0, 0);

}

.slide-left-leave-active {

  opacity: 0;

  transform: translate3d(-100%, 0, 0);

}

</style>