脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue+vue-router转场动画

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

 更新时间：2018年09月01日 12:00:19   作者：点点悠悠  
今天小编就为大家分享一篇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转场动画的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue el-table实现多选框回填的示例代码

    vue el-table实现多选框回填的示例代码

    摘要：Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue watch侦听器有无immediate的运行顺序问题

    vue watch侦听器有无immediate的运行顺序问题

    这篇文章主要介绍了vue watch侦听器有无immediate的运行顺序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,下面这篇文章主要给大家介绍了关于Vue生命周期和钩子函数的相关资料,需要的朋友可以参考下
    2021-10-10
  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    这篇文章主要给大家介绍了关于Vue中插槽slot的使用方法与应用场景的相关资料,插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性,需要的朋友可以参考下
    2021-06-06
  • vue3实战教程之axios的封装和环境变量

    vue3实战教程之axios的封装和环境变量

    这篇文章主要给大家介绍了关于vue3实战教程之axios的封装和环境变量的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • Vue实用功能之实现拖拽元素、列表拖拽排序

    Vue实用功能之实现拖拽元素、列表拖拽排序

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果,下面这篇文章主要给大家介绍了关于Vue实用功能之实现拖拽元素、列表拖拽排序的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue+iview使用树形控件的具体使用

    vue+iview使用树形控件的具体使用

    这篇文章主要介绍了vue+iview使用树形控件的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue 插件的方法代码详解

    vue 插件的方法代码详解

    在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下
    2019-06-06
  • 5分钟学会Vue动画效果(小结)

    5分钟学会Vue动画效果(小结)

    这篇文章主要介绍了5分钟学会Vue动画效果(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue实现固定底部组件的示例

    Vue实现固定底部组件的示例

    本文主要介绍了Vue实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论