- 前端vue - tab栏带滑动效果的实现

最新推荐文章于 2025-07-07 09:42:02 发布

qq_42910523

最新推荐文章于 2025-07-07 09:42:02 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42910523/article/details/81626449

前端专栏收录该内容

1 篇文章

订阅专栏

本文通过在Vue中利用transition组件，结合CSS动画，详细介绍了如何实现在切换Tab时添加滑动效果。通过监听route对象，判断路径匹配，从而触发相应带有动画效果的CSS文件，以此达到平滑的Tab切换体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue过渡动效transition的基础上实现主页tab切换

app.vue 内

<template>
  <div id="app">
       <div class="tab">
        <router-link to="/session" active-class="active">老师</router-link>
        <router-link to="/teacher" active-class="active">消息</router-link>
        <router-link to="/mine" active-class="active">我的</router-link>
        </div>
        <transition :name="transitionName">
            <router-view></router-view>    
        </transition>
  </div>
</template>

监听route对象并判断路由路径是否与所点击tab栏路径一致

watch:{
   '$route'(to,from){
     const toPath = to.path
     const fromPath = from.path
     switch(toPath){
      case '/session': sessionStorage.setItem('toPath',0); break;
      case '/teacher': sessionStorage.setItem('toPath',1); break;
      case '/mine':  sessionStorage.setItem('toPath',2); break; 
     }
     switch(fromPath){
      case '/session': sessionStorage.setItem('fromPath',0); break;
      case '/teacher': sessionStorage.setItem('fromPath',1); break;
      case '/mine':  sessionStorage.setItem('fromPath',2); break; 
     }
     let toIndex = sessionStorage.getItem('toPath')
     let fromIndex = sessionStorage.getItem('fromPath')
     this.transitionName = (toIndex>fromIndex)? 'forward' : 'backward'
   }

相应的引入写有动画过程的css文件


.forward-enter-active,.forward-leave-active{
	transition: 0.5s all ease;
	transform: translateX(0);
}
.forward-enter{
	transform: translateX(100%);
}
.forward-enter-to{
	transform: translateX(0);
}
.forward-leave {
    transform: translate3d(0, 0, 0);
}
 .forward-leave-to {
    transform: translate3d(-100%, 0, 0);
}

.backward-enter-active, .backward-leave-active {
    transition: all 0.5s;
  }
  .backward-leave {
    transform: translate3d(0, 0, 0);
  }
  .backward-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .backward-enter {
    transform: translate3d(-100%, 0, 0);
  }
  .backward-enter-to {
    transform: translate3d(0, 0, 0);
  }

完成~