VUE单页面切换动画(全网最好的切换效果)
// 视图切换动画逻辑let history = window.sessionStoragelet historyCount = history.getItem('count') * 1 || 0function routerTransition (to, from) {const toIndex = history.getItem(to.name)const fromIndex...
·
// 视图切换动画逻辑
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 !== '/' && history.setItem(to.name, historyCount)
direction = 'forward'
store.commit('UPDATE_DIRECTION', {direction})
}
}
router.beforeEach(function (to, from, next) {
routerTransition(to, from)
next()
})
<template>
<div id="app">
<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>
更多推荐
已为社区贡献8条内容
所有评论(0)