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

}

.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);