基於Vue實現頁面切換左右滑動效果，vue頁面切換

基於Vue實現頁面切換左右滑動效果，vue頁面切換

基於Vue的頁面切換左右滑動效果，具體內容如下

HTML文本頁面：

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。