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


Posted in Javascript onOctober 31, 2019

我就废话不多说了,直接上代码吧!

// 视图切换动画逻辑
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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 #Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 #Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 #Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 #Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 #Javascript
You might like
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Stop SQL Server
2007/06/21 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
javascript中this关键字详解
2016/12/12 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
整理Python中的赋值运算符
2015/05/13 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
元旦晚会邀请函
2014/01/27 职场文书
投资意向书
2014/07/30 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年行政工作总结
2014/11/19 职场文书
四年级学生期末评语
2014/12/26 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
德生2P3收音机开箱评测
2022/04/30 无线电