vue+vue-router转场动画的实例代码

Vue+WebPack+HBuilder 项目记录

项目搭建完毕了，但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画，于是找到了vue的转场动画写法，使体验与APP靠近，在此记录；

1.首先我们要监听路由然后判断其是前进还是后退，来实现不同的动画

export default {
 name: 'app',
 data () {
  return {
  transitionName: 'slide-left'
  }
 },
 watch: {
 '$route' (to, from) {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
 }
}

2.template

<transition :name="transitionName">
 <router-view class="child-view"></router-view>
</transition>

3.css;修改css得到不同的效果。

 .child-view {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
    box-sizing: border-box;
 transition: all .6s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(-80px, 0);
 transform: translate(-80px, 0);
}
.slide-left-leave-active, .slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

上面动画可作为不同级页面的转场动画，下面可作为同级页面转场动画，无需监听路由

1.template

<transition name="slide-fade">
 <router-view></router-view>
</transition>

2.css

.slide-fade-enter-active {
 transition: all .3s ease;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -ms-transition: all .3s ease;
 -o-transition: all .3s ease;
}
.slide-fade-leave-active {
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
}
.slide-fade-enter{
 transform: translateX(20px);
 -webkit-transform: translateX(20px);
 -moz-transform: translateX(20px);
 -ms-transform: translateX(20px);
 -o-transform: translateX(20px);
 opacity: 0;
}
.slide-fade-leave-active {
 opacity: 0;
}

以上这篇vue+vue-router转场动画的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue初始化动画加载的实例

    1.在入口文件index.html中加入loading动画: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta content="width=device-width, initial-sca

  • Vue入门之animate过渡动画效果

    简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • vue实现app页面切换动画效果实例

    vue实现app页面切换动画效果实例

    因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用 在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

  • vue元素实现动画过渡效果

    vue元素实现动画过渡效果

    1 在 vue 中,使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前,会先判断是否有对应的 class 样式能匹配到该子元素上: <script src="/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redv-leave {

  • vue+vue-router转场动画的实例代码

    Vue+WebPack+HBuilder 项目记录 项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue的转场动画写法,使体验与APP靠近,在此记录: 1.首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画 export default { name: 'app', data () { return { transitionName: 'slide-left' } }, watch: { '$route' (to, from) { cons

  • vue框架制作购物车小球动画效果实例代码

    最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程: 1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-if=&quo

  • vue router 组件的高级应用实例代码

    1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

  • vue router 用户登陆功能的实例代码

    有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面. 需要用到的知识点有:H5中的会话存储(sessionStorage).vue-router路由前置操作.路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆. const router = new Router({ mode: 'history', base: process.env.BASE_URL, route

  • Vue+Express实现登录注销功能的实例代码

    对Vue全家桶有基本的认知. 用有node环境 了解express 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口 后端验证接口进行session验证,返回信息 前端根据后端返回信息进行操作 2.前后端进行了怎么的交互? 登录 注销 二丶

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • 使用 Vue.js 仿百度搜索框的实例代码

    整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

  • vue Render中slots的使用的实例代码

    本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu

  • vue.js加载新的内容(实例代码)

    vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&

随机推荐