vue 路由过渡动效

时间:2022-05-28 想上天与太阳并肩人气:0

效果展示

css 滑入和滑出的动画

.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}
.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);} 
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}

transition

使用 vue提供的 transition 标签，data中定义 transitionName 变量

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  }
}

watch 监听路由的变化

通过监听路由的变化知道是返回还是打开新页面在通过在变量 transitionName 赋不同的值改变动画

watch:{
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'twofade';
      }else if(to.meta.index < from.meta.index){
        this.transitionName = 'threefade';
      }
    }
  }

可能遇到的问题

关于样式 操作上在切换中可能会有遇到样式的问题需要调整样式来达到自己需要的效果
我的解决方法是

#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
  &>div{width: 100%;min-height: 100vh;}
}

加载全部内容