相思资源网 Design By www.200059.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.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于Vue实现页面切换左右滑动效果的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。