vue+vue-router转场动画

来源：互联网发布：户外六只脚软件下载编辑：程序博客网时间：2024/06/06 02:37

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

1 0