好资源导航 » 文章资讯 » VUE单页面切换动画代码(全网最好的切换效果)

VUE单页面切换动画代码(全网最好的切换效果)

2023-08-10 01:03:04 257

我就废话不多说了，直接上代码吧！

//视图切换动画逻辑
lethistory=window.sessionStorage
lethistoryCount=history.getItem('count')*1||0
functionrouterTransition(to,from){
consttoIndex=history.getItem(to.name)
constfromIndex=history.getItem(from.name)
letdirection='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;
}
@keyframesslideInLeft{
from{
transform:translate3d(100%,0,0);
opacity:1;
}
to{
transform:translate3d(0,0,0);
opacity:1;
}
}
@keyframesslideInRight{
from{
transform:translate3d(-100%,0,0);
opacity:1;
}
to{
transform:translate3d(0,0,0);
opacity:1;
}
}
@keyframesslideLeftOut{
from{
transform:translate3d(0,0,0);
opacity:0;
}
to{
transform:translate3d(100%,0,0);
opacity:0;
}
}
@keyframesslideRightOut{
from{
transform:translate3d(0,0,0);
opacity:0;
}
to{
transform:translate3d(-100%,0,0);
opacity:0;
}
}
.slide-left-enter-active{
animation:slideInLeft.3sforwards;
z-index:5;
}

.slide-left-leave-active{
animation:slideLeftOut.3sforwards;
z-index:3;
}
.slide-right-enter-active{
animation:slideInRight.3sforwards;
z-index:5;
}

.slide-right-leave-active{
animation:slideRightOut.3sforwards;
z-index:3;
}

以上这篇VUE单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

VUE单页面切换动画代码(全网最好的切换效果)

热门推荐

随机推荐