So implementieren Sie den Effekt des Vue-Routers, der die Übergangsanimation zum Umblättern der linken und rechten Seite automatisch beurteilt

Ich habe vor einiger Zeit ein mobiles Spa-Projekt durchgeführt. Die Technologie basiert auf: vue + vue-router + vuex + mint-ui. Da die Webpack-Vorlage von vue-cli scaffolding verwendet wird, verwenden alle Seiten Dateien mit . Vue-Suffix als Komponente, dieser Artikel teilt Ihnen hauptsächlich die automatische Beurteilung der Animationseffekte beim Umblättern von Seiten nach links und rechts mit. Ich hoffe, dass er Ihnen helfen kann.

Das Unternehmen hat in letzter Zeit relativ wenige Projekte und endlich habe ich Zeit, einige meiner kleinen Erfahrungen mit Vue-Router aufzuzeichnen.

Allgemeine Single-Page-Anwendungen für mobile Ports werden beim Springen einige Probleme haben Die entsprechende Übergangsanimation, wie zum Beispiel:

1. Die Übergangsanimation, die beim Springen von der aktuellen Seite der ersten Ebene zur Seite der zweiten Ebene angezeigt werden muss, ist, wenn die Seite der ersten Ebene verschoben wird auf der linken Seite des Bildschirms und verschwindet,

Sekundärseiten werden angezeigt und bewegen sich von rechts nach links auf dem Bildschirm. (Ähnlich dem Effekt, wenn man ein Buch auf die nächste Seite umblättert)

2. Die Übergangsanimation, die angezeigt werden muss, wenn von der aktuellen Seite der zweiten Ebene zur Seite der ersten Ebene zurückgesprungen wird, ist, wenn die zweite Seite angezeigt wird Die Seite der ersten Ebene bewegt sich auf die rechte Seite des Bildschirms und verschwindet.

Die Seite der ersten Ebene bewegt sich von links nach rechts auf dem Bildschirm. Ähnlich wie (der Effekt, wenn man in einem Buch auf die vorherige Seite zurückblättert)

Es stellt sich jedoch die Frage: Wie lässt sich die hierarchische Beziehung zwischen der aktuellen Seite und der zu überspringenden Seite bestimmen?

Meine Lösung ist: Legen Sie beim Erstellen einer Seite (Komponente) das Pfadattribut (Zugriffspfad) der Seite im Router fest, der die Seite definiert, um die hierarchische Beziehung zwischen Komponenten zu unterscheiden.

Zum Beispiel ist der Zugriffspfad einer Seite (Komponente) der ersten Ebene „A“ „/A“. Der Zugriffspfad seiner Sekundärseite „B“ ist „/A/B“.

Bevor Sie dann zur Seite springen, müssen Sie nur noch die Pfadtiefe der aktuellen Seite und der Seite, zu der gesprungen werden soll, vergleichen Übergangsanimation dynamisch einrichten.

Zum Beispiel ist die Tiefe von „/A/B“ > die Tiefe von „/A“, dann sollte das Springen von Seite B zu Seite A Effekt 2 sein: (der Effekt, ein Buch wieder in die Seite umzudrehen). vorherige Seite) .

Eins. Zuerst die übergeordnete Seite

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. Zweitens hänge ich mein main.js-Fragment an (wird verwendet, um die Übergangsanimation dynamisch festzulegen, bevor zur Seite gesprungen wird)

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,
     },
    }
   });
  }
 }
});

Verwandte Empfehlungen:

jquery implementiert die Umblättereffekte auf der linken und rechten Seite der Tastatur_jquery

ausführliche Erklärung des Vue-Routers, der jquery und params zum Übergeben von Parametern verwendet

vue Router-Routing-Parameter Lösung zum Aktualisieren des verschwindenden Problems

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Effekt des Vue-Routers, der die Übergangsanimation zum Umblättern der linken und rechten Seite automatisch beurteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!