基于Vue的页面切换左右滑动效果

时间:2023-01-25 17:55:55

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;
}