当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于Vue实现页面切换左右滑动效果

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网