VUE如何实现单页面切换动画效果-创新互联

这篇文章主要介绍VUE如何实现单页面切换动画效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联是一家专注于成都做网站、成都网站设计与策划设计,平罗网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:平罗等地区。平罗做网站价格咨询:13518219792

代码如下：

// 视图切换动画逻辑
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 '~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;
} 

以上是“VUE如何实现单页面切换动画效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：VUE如何实现单页面切换动画效果-创新互联
文章路径：http://bjjierui.cn/article/dhgdhp.html