这篇文章主要介绍Vue如何实现单页面切换动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下:// 视图切换动画逻辑 let history
这篇文章主要介绍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()
})
<template>
<div id="app">
<div v-transfer-dom >
<loading :show="isLoading" :transition="''"></loading>
</div>
<transition :name="viewAnimate">
<router-view v-if="isNetworkOnline"></router-view>
<no-network v-if="!isNetworkOnline"></no-network>
</transition>
</div>
</template>
<script>
import '@/assets/iconfont/iconfont.CSS'
import { Loading, TransferDom } from 'vux'
import {mapState} from 'vuex'
import noNetwork from '@/page/system/callback/noNetwork.vue'
export default {
directives: {
TransferDom
},
computed: {
...mapState({
isLoading: state => state.isLoading,
direction: state => state.direction,
isNetworkOnline: state => state.isNetworkOnline
})
},
// dynamically set transition based on route change
watch: {
'$route' (to, from) {
if (this.direction === 'forward') {
this.viewAnimate = 'slide-left'
} else {
this.viewAnimate = 'slide-right'
}
}
},
data () {
return {
viewAnimate: 'slide-left'
}
},
components: {
Loading,
noNetwork
}
}
</script>
<style lang="less">
@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;
}
</style>
以上是“VUE如何实现单页面切换动画效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!
--结束END--
本文标题: VUE如何实现单页面切换动画效果
本文链接: https://www.lsjlt.com/news/68096.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0