vue 路由切换过渡动效滑入滑出效果的实例代码

效果展示

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

到此这篇关于vue 路由切换过渡动效 滑入 滑出效果的文章就介绍到这了,更多相关vue 路由过渡动效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！