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 相关文章推荐
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
用js实现博客打赏功能
Oct 24 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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初学入门
2006/11/19 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python中@property的理解和使用示例
2019/06/11 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python3中sys.argv的实例用法
2020/04/24 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
小学爱国卫生月活动总结
2014/06/30 职场文书
检讨书范文1000字
2015/01/28 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016入党心得体会范文
2016/01/06 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python