私は少し前にモバイルスパプロジェクトを作成しました。このテクノロジーは、vue + vue-router + vuex + mint-ui に基づいています。vue-cli スキャフォールディングの Webpack テンプレートが使用されるため、すべてのページで .vue 拡張子が付いているファイルが使用されます。この記事では主に、vue ルーターが左右のページめくりのトランジション アニメーションの効果を自動的に決定する方法について説明します。
最近会社のプロジェクトは比較的少ないので、vue-router を使用した私の小さな経験をいくつか記録する時間ができました。
一般的なモバイル ポートのシングルページ アプリケーションには、ページにジャンプするときに対応する遷移アニメーションがあります。
1. 現在の第 1 レベルのページから第 2 レベルのページにジャンプするときに表示する必要がある遷移アニメーションは、第 1 レベルのページが画面の左側に移動して消えるときに、 第 2-レベルページが画面右から左に移動して表示されます。 (本を次のページにめくったときの効果と似ています) 2. 現在の第 2 レベルのページから第 1 レベルのページに戻るときに表示する必要がある遷移アニメーションは、第 2 レベルのページが移動するときです。 画面の左側が右に移動して見えます。 (本を前のページに戻す効果) と似ていますしかし、次のような疑問が生じます: 現在のページとジャンプするページの間の階層関係をどのように判断するか? 私の解決策は、ページ(コンポーネント)を作成するときに、ページを定義するルーターにページのパス(アクセスパス)属性を設定して、コンポーネント間の階層関係を区別することです。 たとえば、第 1 レベルのページ (コンポーネント) 'A' のアクセス パスは '/A' です。彼のセカンダリ ページ 'B' のアクセス パスは '/A/B' です。 その後、ページにジャンプする前に、現在のページとジャンプ先のページのパスの深さを比較して動的に遷移を設定するだけで済みます。アニメーション。 たとえば、「/A/B」の深さ > 「/A」の深さの場合、ページ B からページ A へのジャンプは効果 2 になります: (本を前のページに戻す効果) .一。まず親ページ 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>
//进入路由之前设置拦截器 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) : ''; store.commit('SET_KEEPALLIST', keepLi); } //根据路径名深度设置转场动画类型 store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin')); 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, }, } }); } } });
jquery はキーボードの左右のページ回転を実現しますeffect_jquery
Vueルーターはjqueryとparamsを使用してパラメータを詳細に渡します
Vueルーターのルーティングパラメータが更新されて消える問題の解決策
以上がvue routerの左右ページめくり遷移アニメーションを自動判定する効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。