基于Vue的頁面切換左右滑動效果，具體內(nèi)容如下
銅陵網(wǎng)站建設公司成都創(chuàng)新互聯(lián)公司,銅陵網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為銅陵上1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的銅陵做網(wǎng)站的公司定做！
HTML文本頁面：
JS定義代碼：定義在全局js文件里面
重慶分公司
重慶分公司
router.beforeEach((to, from, next) => {
const list = ['home', 'group', 'user'] // 將需要切換效果的路由名稱組成一個數(shù)組
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;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
