作者:手机用户2602886175 | 来源:互联网 | 2022-01-24 23:40
我就废话不多说了,直接上代码吧!
// 视图切换动画逻辑
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()
})
以上这篇VUE单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。