Comment implémenter l'effet de vue router en jugeant automatiquement l'animation de transition de rotation de page gauche et droite

J'ai réalisé un projet de spa mobile il y a quelque temps. La technologie est basée sur : vue + vue-router + vuex + mint-ui Parce que le modèle webpack de l'échafaudage vue-cli est utilisé, toutes les pages utilisent des fichiers avec le . vue en tant que composant, cet article partage principalement avec vous le jugement automatique de Vue Router sur les effets d'animation de transition de rotation de page gauche et droite. J'espère qu'il pourra vous aider.

La société a relativement peu de projets récemment et j'ai enfin le temps d'enregistrer une partie de ma petite expérience avec vue-router

Les applications générales d'une seule page sur le port mobile auront quelques problèmes lors du passage à. la page. Animation de transition correspondante, telle que :

1. L'animation de transition qui doit être affichée lors du passage de la page actuelle de premier niveau à la page de deuxième niveau est lorsque la page de premier niveau passe à le côté gauche de l'écran et disparaît,

Des pages secondaires apparaissent en se déplaçant de la droite vers la gauche de l'écran. (Semblable à l'effet de tourner un livre vers la page suivante)

2. L'animation de transition qui doit être affichée lors du passage de la page actuelle de deuxième niveau à la page de premier niveau est lorsque la deuxième La page de premier niveau se déplace vers la droite de l'écran et disparaît,

La page de premier niveau se déplace de la gauche vers la droite de l'écran. Semblable à (l'effet de retourner un livre à la page précédente)

Mais une question se pose : Comment déterminer la relation hiérarchique entre la page en cours et la page à sauter ?

Ma solution est la suivante : lors de la création d'une page (composant), définissez l'attribut path (chemin d'accès) de la page dans le routeur qui définit la page pour distinguer la relation hiérarchique entre les composants.

Par exemple, le chemin d'accès d'une page (composant) de premier niveau « A » est « /A ». Le chemin d'accès de sa page secondaire 'B' est '/A/B'.

Ensuite, avant de passer à la page, il vous suffit de comparer la profondeur du chemin de la page actuelle et de la page vers laquelle accéder. Configurer dynamiquement l'animation de transition.

Par exemple, la profondeur de '/A/B' > la profondeur de '/A', puis passer de la page B à la page A devrait être l'effet 2 : (l'effet de retourner un livre au page précédente) .

Un. D'abord la page parent

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>

2. Deuxièmement, je joins mon fragment main.js (utilisé pour définir dynamiquement l'animation de transition avant de passer à la 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,
     },
    }
   });
  }
 }
});

Recommandations associées :

jquery implémente les effets de rotation des pages gauche et droite du clavier_jquery

Explication détaillée du routeur vue utilisant jquery et params pour transmettre les paramètres

vue Paramètres de routage du routeur Solution pour actualiser le problème de disparition

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!