发布于 2017-08-11 06:44:56 | 77 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Vue.js 教程,程序狗速度看过来!

Vue.js 轻量级 JavaScript 框架

Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。


这篇文章主要为大家详细介绍了基于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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。



相关阅读 :
基于Vue实现页面切换左右滑动效果
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
基于Vue实现tab栏切换内容不断实时刷新数据功能
基于Vue实现支持按周切换的日历
基于vue实现分页/翻页组件paginator示例
基于vue实现swipe轮播组件实例代码
基于Vue.js实现数字拼图游戏
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Vue-Router实现页面正在加载特效方法示例
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
详解vue之页面缓存问题(基于2.0)
vue实现todolist单页面应用
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务