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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

以上是 基于Vue的页面切换左右滑动效果 的全部内容， 来源链接： utcz.com/z/378720.html

回到顶部