我就废话不多说了,直接上代码吧!
// 视图切换动画逻辑 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单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。