Vue-based page switching: Sliding between left and right, vue page Switching

Vue-based page switching: Sliding between left and right, vue page Switching

Vue-based page switching between left and right slides. The details are as follows:

HTML text page:

<Template> <div id = "app> <transition: name =" direction "mode =" out-in "> <! -- Dynamically obtain the transition name value --> <router-view class = "app-view" wechat-title> </router-view> </transition> </div>/ template>

JS definition code: defined in the Global js File

Router. beforeEach (to, from, next) => {const list = ['home', 'group ', 'user'] // The route name to be switched into an array const toName =. name // The name of the route to enter const fromName = from. name // The name of the route to be left. const toIndex = list. indexOf (toName) // enter the subscript const fromIndex = list. indexOf (fromName) // exit the subscript let ction = ''if (toIndex>-1 & fromIndex>-1) {// if both the lower mark have if (toIndex <fromIndex) {// If the subscript to be entered is smaller than the subscript to be left, it is left slide direction = 'left'} else {direction = 'right' // If the subscript to be entered is greater than the subscript to be left, so it's right-sliding} store. state. viewDirection = direction // use vuex to assign a value here return next ()})

In the App. vue file, calculate the attributes:

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

CSS 3 for animation effect definition: sass

To add a style file:

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

Define the transition between the animation Entry and Exit:

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.