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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
简单的js分页脚本
May 21 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python删除不需要的python文件方法
2018/04/24 Python
python opencv实现证件照换底功能
2019/08/19 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
新教师工作感言
2014/02/16 职场文书
校企合作协议书
2014/04/16 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
白岩松演讲
2014/05/21 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Java完整实现记事本代码
2022/06/16 Java/Android