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) {

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()

})

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

}

}

@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;

}