ホームページ > 記事 > ウェブフロントエンド > Vue-routerとトランジションを組み合わせてアプリアニメーション切り替え効果のサンプル共有を実現
この記事では主に、Vue-router とトランジションを組み合わせてアプリの前後のアニメーション切り替え効果を実現する例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
1: まずルートを設定し、ルーティング設定を変更します
ルーティング設定は重要なポイントには入りません
this.isBack = true VueRouter.prototype.goBack = function () { this.isBack = true window.history.go(-1) }
2: ルートの前後のステータスを記録する goBack メソッドを追加します。変更 (ルートが変更されるとき) このときのルーティング ステータスが順方向か逆方向かを判断します)
<template> <p> 动态绑定路由动画,根据路由状态的不同绑定不同的路由动画分别为 :‘slide-left' 和 'slide-right' <transition :name="transitionName"> <router-view class="Router"></router-view> </transition> </p> </template> <script> export default { data() { return { transitionName: 'slide-right' // 默认动态路由变化为slide-right } }, watch: { '$route' (to, from) { let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退 if(isBack) { this.transitionName = 'slide-right' } else { this.transitionName = 'slide-left' } this.$router.isBack = false } } } </script>
3: 順方向と逆方向のアニメーションに異なるアニメーション効果を追加します。 具体的なコードは次のとおりです。
<style> .Router { position: absolute; width: 100%; transition: all .8s ease; top: 40px; } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-100%, 0); transform: translate(-100% 0); } </style>
4:ルートが前進している場合は、通常のメソッドに従います
5. 戻る場合は goBack メソッドを呼び出すだけです
CSS3 アニメーション関連属性のトランジション、アニメーション、トランスフォームの包括的な比較
以上がVue-routerとトランジションを組み合わせてアプリアニメーション切り替え効果のサンプル共有を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。