VUE单页面切换动画代码(全网最好的切换效果)
今天小编就为大家分享一篇VUE单页面切换动画代码(全网最好的切换效果)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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) {
mit('UPDATE_DIRECTION', {direction})
} else {
direction = 'reverse'
mit('UPDATE_DIRECTION', {direction})
} else {
++historyCount
history.setItem('count', historyCount)
to.path !== '/' history.setItem(to.name, historyCount)
direction = 'forward'
mit('UPDATE_DIRECTION', {direction})
router.beforeEach(function (to, from, next) {
routerTransition(to, from)
next()
})
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 '~@/mon.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单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。
在线咨询
：18720358503
2021-01-06
