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

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

基于vue的页面切换左右滑动效果，具体内容如下

HTML文本页面：

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 BJPdU&& fromIndex > -1) { // 如果下标都存在

if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑

direction = 'left'

} else {

http:// 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;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。