您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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如何实现单页面切换动画效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。