铁雪资源网 Design By www.gsvan.com
基于Vue的页面切换左右滑动效果,具体内容如下
HTML文本页面:
<template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-view> </transition> </div> </template>
JS定义代码:定义在全局js文件里面
router.beforeEach((to, from, next) => { const list = ['home', 'group', 'user'] // 将需要切换效果的路由名称组成一个数组 const toName = to.name // 即将进入的路由名字 const fromName = from.name // 即将离开的路由名字 const toIndex = list.indexOf(toName) // 进入下标 const fromIndex = list.indexOf(fromName) // 离开下标 let direction = '' if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在 if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标,那么是左滑 direction = 'left' } else { direction = 'right' // 如果进入的下标大于离开的下标,那么是右滑 } } store.state.viewDirection = direction //这里使用vuex进行赋值 return next() })
在App.vue文件中,进行计算属性:
computed: { direction () { const viewDir = this.$store.state.viewDirection let tranName = '' if (viewDir === 'left') { tranName = 'view-out' } else if (viewDir === 'right') { tranName = 'view-in' } else { tranName = 'fade' } return tranName }, },
css3进行动画效果定义:使用sass
待定义引入样式文件:
// Variables $AnimateHook: "animated"; $AnimateDuration: 0.8s; // Mixins // Base Style .#{$AnimateHook} { -webkit-animation-duration: $AnimateDuration; animation-duration: $AnimateDuration; -webkit-animation-fill-mode: both; animation-fill-mode: both; // Modifier for infinite repetition &.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } } // Slide @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes inRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes inRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes outLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes outLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } }
定义进入与离开的动画过渡:
.fade-enter-active, .fade-leave-active { transition: all .2s ease; } .fade-enter, .fade-leave-active { opacity: 0; } .view-in-enter-active, .view-out-leave-active { position: absolute; top: 0; width: 100%; padding-top: px2rem($titbarHeight); -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .view-in-enter-active { -webkit-animation-name: inRight; animation-name: inRight; } .view-out-leave-active { -webkit-animation-name: outLeft; animation-name: outLeft; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无基于Vue实现页面切换左右滑动效果的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?