我就废话不多说了，直接上代码吧！
// 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let direction = 'forward' if (toIndex) { if (toIndex >= fromIndex || !fromIndex) { store.commit('UPDATE_DIRECTION', {direction}) } else { direction = 'reverse' store.commit('UPDATE_DIRECTION', {direction}) } } else { ++historyCount history.setItem('count', historyCount) to.path !== 'https://www.jb51.net/' && history.setItem(to.name, historyCount) direction = 'forward' store.commit('UPDATE_DIRECTION', {direction}) } } router.beforeEach(function (to, from, next) { routerTransition(to, from) next() })
<template> <div> <div v-transfer-dom > <loading :show="isLoading" :transition="''"></loading> </div> <transition :name="viewAnimate"> <router-view v-if="isNetworkOnline"></router-view> <no-network v-if="!isNetworkOnline"></no-network> </transition> </div> </template> <script> import '@/assets/iconfont/iconfont.css' import { Loading, TransferDom } from 'vux' import {mapState} from 'vuex' import noNetwork from '@/page/system/callback/noNetwork.vue' export default { directives: { TransferDom }, computed: { ...mapState({ isLoading: state => state.isLoading, direction: state => state.direction, isNetworkOnline: state => state.isNetworkOnline }) }, // dynamically set transition based on route change watch: { '$route' (to, from) { if (this.direction === 'forward') { this.viewAnimate = 'slide-left' } else { this.viewAnimate = 'slide-right' } } }, data () { return { viewAnimate: 'slide-left' } }, components: { Loading, noNetwork } } </script> <style lang="less"> @import '~vux/src/styles/reset.less'; @import '~vux/src/styles/close.less'; @import '~@/styles/common.less'; body { background-color: #fbf9fe; } @keyframes slideInLeft { from { transform: translate3d(100%, 0, 0); opacity: 1; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideInRight { from { transform: translate3d(-100%, 0, 0); opacity: 1; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes slideLeftOut { from { transform: translate3d(0, 0, 0); opacity: 0; } to { transform: translate3d(100%, 0, 0); opacity: 0; } } @keyframes slideRightOut { from { transform: translate3d(0, 0, 0); opacity: 0; } to { transform: translate3d(-100%, 0, 0); opacity: 0; } } .slide-left-enter-active { animation: slideInLeft .3s forwards; z-index:5; } .slide-left-leave-active { animation: slideLeftOut .3s forwards; z-index:3; } .slide-right-enter-active { animation: slideInRight .3s forwards; z-index:5; } .slide-right-leave-active { animation: slideRightOut .3s forwards; z-index:3; } </style>
以上这篇VUE单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: