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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
BootStrap入门学习第一篇
Aug 28 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 管理系统程序中的后门
2009/08/05 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP 读取和编写 XML
2014/11/19 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript实现微信分享
2014/12/23 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JS实现购物车特效
2017/02/02 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python 获取et和excel的版本号
2009/04/09 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python实现简易动态时钟
2018/11/19 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
上课玩手机检讨书
2014/02/08 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
学校师德承诺书
2014/05/23 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
民主评议党员总结
2014/10/20 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
解析Java异步之call future
2021/06/14 Java/Android
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs