How to use vue-route to automatically determine the left and right page turning transition animation

I made 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 are in .vue The file with the suffix is ​​used as a component

The company has relatively few projects recently and finally I have time to record some of my little experience using vue-router,

General mobile port single-page application There will be a corresponding transition animation when jumping to the page, 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 that the first-level page moves to the left side of the screen At the same time as it disappeared,

the secondary page appeared 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 back from the current second-level page to the first-level page is to move the second-level page to the right of the screen. At the same time as it disappeared,

the first-level page appeared 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), distinguish the components by setting the path (access path) attribute of the page in the router of the definition page hierarchical relationship between them.

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 current page and The path depth of the page to be jumped to can be used to dynamically set the transition animation.

For example, the depth of '/A/B' > '/A' 's depth is from the B page Jumping to the A page should be Effect 2: (The effect of turning a book back to the previous page).

1. First the parent page

home.vue:

##

 
  
 scoped

.child-view {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
}

<em><em><em>.rightin-enter,<br/>.leftin-leave-active {<br/> opacity: 0;<br/> transform: translate3d(50% 0, 0);<br/> -webkit-transform: translate3d(50%, 0, 0);<br/> -moz-transform: translate3d(50%, 0, 0);<br/>}<br/><br/>.leftin-enter,<br/>.rightin-leave-active {<br/> opacity: 0;<br/> transform: translate3d(-50% 0, 0);<br/> -webkit-transform: translate3d(-50%, 0, 0);<br/> -moz-transform: translate3d(-50%, 0, 0);<br/>}<br/><br/><span style="color: #0000ff;"></style></span></em></em></em>

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: &#39;home&#39;};
      next({
        name: &#39;login&#39;,
        params: {
          jumpTo: {
            name: toWhere.name,
            params: toWhere.params,
            query: toWhere.query,
          },
        }
      });
    }
  }
});

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