How to implement the effect of vue router automatically judging the left and right page turning transition animation

I did a mobile spa project some time ago. The technology is based on: vue + vue-router + vuex + mint-ui. Because the webpack template of vue-cli scaffolding is used, all pages have files with the .vue suffix as a Component, this article mainly shares with you Vue Router’s automatic judgment of left and right page turning transition animation effects. I hope it can help you.

There are relatively few projects in the company recently and finally I have time to record some of my little experience in using vue-router.

General mobile port single-page applications will have some problems when jumping to the page. Corresponding transition animation, such as:

1. The transition animation that needs to be displayed when jumping from the current first-level page to the second-level page is when the first-level page moves to the left side of the screen and disappears,

Secondary pages appear moving from the right to the left of the screen. (Similar to the effect of turning a book to the next page)

　2. The transition animation that needs to be displayed when jumping from the current second-level page back to the first-level page is when the second-level page moves to the right side of the screen and disappears,

The first-level page appears moving from the left to the right of the screen. Similar to (the effect of turning a book back to the previous page)

But a question arises: How to determine the hierarchical relationship between the current page and the page to be jumped?

My solution is: when creating a page (component), set the path (access path) attribute of the page in the router that defines the page to distinguish the hierarchical relationship between components.

For example, the access path of a first-level page (component) ‘A’ is ‘/A’. The access path of his secondary page 'B' is '/A/B'.

Then before jumping to the page, you only need to compare the path depth of the current page and the page to be jumped to dynamically Set up transition animation.

For example, the depth of '/A/B' > the depth of '/A', then jumping from page B to page A should be effect 2: (the effect of turning a book back to the previous page) .

one. First the parent page

home.vue:

<!-- keepAlList是用来动态判断组件是否需要keep-alive,建议保存到vuex中作为全局变量，至于下方的css动画，看官可以按照喜好自由修改-->
<transition :name="transNa">
 <keep-alive :include="keepAlList">
 <router-view class="child-view"></router-view>
 </keep-alive>
</transition>
<style scoped>
.child-view {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
}
.rightin-enter,
.leftin-leave-active {
 opacity: 0;
 transform: translate3d(50% 0, 0);
 -webkit-transform: translate3d(50%, 0, 0);
 -moz-transform: translate3d(50%, 0, 0);
}
.leftin-enter,
.rightin-leave-active {
 opacity: 0;
 transform: translate3d(-50% 0, 0);
 -webkit-transform: translate3d(-50%, 0, 0);
 -moz-transform: translate3d(-50%, 0, 0);
}
</style>

two. Secondly, I attach my main.js fragment (used to dynamically set the transition animation before jumping to the page)

main.js:

//进入路由之前设置拦截器
let noLoginList = ["login", "register", "forget", "home", "classify", "goodsDetial"];
router.routeInfo.beforeEach((to, from, next) => {
 let user = sessionStorage.getItem('user');
 //如果要去登录页面
 if (noLoginList.indexOf(to.name) >= 0) {
  if (!user || user == '') {
   //未登录的状态通行
   next();
   return;
  } else {
   if (["login", "register", "forget"].indexOf(to.name) >= 0) {
    //已登录的状态去首页
    next({
     name: 'home'
    });
    return;
   } else {
    //已登录的状态去首页
    next();
    return;
   }
  }
 } else {
  //去登录页面以外的页面(以下是本文关键代码)
  if (user && user != '') {
   //判断是否为需要缓存组件,如果是添加组件名到数组
   if (to.meta.keepAlive) {
    const toName = to.name;
    let keepLi = store.getters.getKeepAlList;
    keepLi.indexOf(toName) < 0 ? keepLi.push(toName) : &#39;&#39;;
    store.commit(&#39;SET_KEEPALLIST&#39;, keepLi);
   }
   //根据路径名深度设置转场动画类型
   store.commit(&#39;SET_TRANSNA&#39;, (to.path.split(&#39;/&#39;).length < from.path.split(&#39;/&#39;).length ? &#39;leftin&#39; : &#39;rightin&#39;));
   next();
  } else {
   let toWhere = router.nameList.indexOf(to.name) >= 0 ? to : {name: 'home'};
   next({
    name: 'login',
    params: {
     jumpTo: {
      name: toWhere.name,
      params: toWhere.params,
      query: toWhere.query,
     },
    }
   });
  }
 }
});

Related recommendations:

jquery realizes the special effect of keyboard turning left and right_jquery

vue router uses jquery and params to pass parameters in detail

vue router routing parameters refresh and disappear Solution to the problem

The above is the detailed content of How to implement the effect of vue router automatically judging the left and right page turning transition animation. For more information, please follow other related articles on the PHP Chinese website!