我就废话不多说了,直接上代码吧!
// 视图切换动画逻辑 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单页面切换动画代码(全网最好的切换效果)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
VUE,单页面,切换,动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“VUE单页面切换动画代码(全网最好的切换效果)”评论...
更新动态
20240517
20240517
- 刘欢.2004-经典20年珍藏锦集【新索】【WAV+CUE】
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- CD圣经上榜天碟1995-乌仁娜-《蒙古草原之歌》[WAV+CUE].
- 【电影原声】武满彻《旭日东升》1993[WAV+CUE整轨]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[320K/MP3][148.54MB]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[FLAC/分轨][405.72MB]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[320K/MP3][80.8MB]
- 女神异闻录5佐仓双叶coop攻略 p5r佐仓双叶对话选项攻略
- 【民谣】张智《尼勒克小镇》[FLAC]
- 林一峰2018-TRAVELOGUE4ESCAPE[香港首版][WAV+CUE]
- MollyLewis《OnTheLips》(2024)[Hi-Res96kHz_24bitFLAC]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[FLAC/分轨][230.77MB]
- 群星《影视剧 春色寄情人 原声带》[320K/MP3][394.18MB]
- 吴牧野《强者独白II 李斯特巅峰作品选》[320K/MP3][216.01MB]
- 女神异闻录5御船千早coop攻略 p5r御船千早对话选项攻略