javascript - vue routing animation problem

Question

<template>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
</template>

const routes = [
  { path: '/home', component: home },
  { path: '/detail', component: detail },
  { path: '/order', component: order },
  { path: '/', component: home }
]

    watch: {
        '$route' (to, from) {
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      }

My whole page only has one <router-view></router-view>. Is it impossible to make the route that is about to disappear disappear from the left and the route that is about to come in from the right when switching routes?

Answer 1

Add transition directly to the component

Answer 2

Do you want to simulate the route switching method of APP

I recently wanted to do a small project. It is still a semi-finished product, but the transition part has already implemented this operation. You can go and see if it is what you want

https://github.com/tgxpuisb/vue-open-use

Answer 3

Set the mode to out–in