基于Vue實現頁面切換左右滑動效果

<template>
 <div id="app>
 <transition :name="direction" mode="out-in"> <!--動態獲得transition 的name值-->
 <router-view class="app-view" wechat-title></router-view>
 </transition>
 </div>
</template>

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()
 })

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

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