css - Slide Reverse Transitions, Vue Js -

i'm developing single page application / mobile app, vue.js. want slide effect when changing pages, , can this:

transition name="slide"  router-view transition transition 

but wanted reverse effect of slide when user returns page. in other words, when user opens new page, page come right, when go back, page come left.

there plugin vue router, called vue-router-transition, not work. out of date, works old versions of vue.

also there tutorial on dynamic transitions, works when parents routes, ex: example.com/rota1/rota2/rota3, not case.

i thought of following logic in before.each.router, set transition class (slide-left or slide-right) depending on whether user clicked on go button.

the problem not know how apply logic in code. have pass value of variable in main.js app.vue , not know how this.

a while ago i've used meta object in vue-router , added "fake" depth, because haven't children objects. if use children, go example: https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js

export default () => {   return [{       meta: {         depth: 0       },       path: '/home',       component: home     },     {       meta: {         depth: 1       },       path: '/about',       component:     }] } 

now can check own in app.vue.

watch: {   $route(to, from) {     const todepth = to.meta.depth || 0;     const fromdepth = from.meta.depth || 0;      this.transitionname = todepth >= fromdepth ? 'slide-left' : 'slide-right';   } }