tab栏滑动效果

主要是用到了 transition，用过度来实现效果

<template>
<div>
  <div class="box">
    <div class="left" @click="tabFun('0')">
      left
    </div>
     <div class="right" @click="tabFun('1')">
      right
    </div>
    <div class='bg' :style="{left:position}"></div>
     
  </div>
</div>
</template>
// 上面使用模板
<script>
export default {
  components:{
  
  },
  data(){
    return{
      activeIndex:'0',
      position:'0'
    }
  },
  methods:{
    tabFun(val){
      this.activeIndex = val
      if(val == '0'){
        this.position = 0
      }else if(val == '1'){
        this.position = '50%'
      }
    }
  },
};
</script>

<style scoped lang="scss">
.box{
  height: 50px;
  width: 400px;
  background: red;
  border-radius: 25px;
  margin: 50px;
  border: 1px solid red;
  display: flex;
  position: relative;
  .left{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
  }
  .right{
   flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
     z-index: 10;
     cursor: pointer;
  }
  .bg{
   position: absolute;
   top: 0;
   background: #fff;
   height: 50px;
   width: 200px;
   border-radius: 25px;
    z-index: 1;
    -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  
  }
 
}
</style>