18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

家域微信小程序_VUE单页面切换动画代码(全网最好

2021-01-06分享 "> 对不起,没有下一图集了!">
VUE单页面切换动画代码(全网最好的切换效果)       今天小编就为大家分享一篇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) { mit('UPDATE_DIRECTION', {direction}) } else { direction = 'reverse' mit('UPDATE_DIRECTION', {direction}) } else { ++historyCount history.setItem('count', historyCount) to.path !== '/' history.setItem(to.name, historyCount) direction = 'forward' mit('UPDATE_DIRECTION', {direction}) router.beforeEach(function (to, from, next) { routerTransition(to, from) next() })
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 '~@/mon.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单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询