大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍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() })
以上是“VUE如何实现单页面切换动画效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!