vue的tab选项卡及tab下面的线过渡滑动效果

<template>
  <div>
    <div class="risk-tab-top">
      <div
        class="risk-tab-cont"
        @click="tabChange(index)"
        v-for="(item,index) in tabList "
        :class="[activeIndex == index?'risk-active':'']"
        :key="index"
      >{{item}}</div>
      <div
        class="risk-active-line"
        :class="[activeIndex == 0?'risk-active-line-f':'risk-active-line-r']"
      ></div>
    </div>
    <ul class="risk-cont">
      <li v-show="activeIndex == 0">111111111111</li>
      <li v-show="activeIndex == 1">22222222222222</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      tabList: ['就近搜索', '指定搜索'],
      contList: ['11111111', '2222222222'],
      activeIndex: 0
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    tabChange(val) {
      this.activeIndex = val;
      console.log(val);
    }
  }
};
</script>
<style   scoped>
.risk-tab-top {
  color: #fff;
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
  justify-content: center;
  .risk-tab-cont {
    cursor: pointer;

    width: 71px;
    text-align: center;
    font-size: 16px;
    height: 28px;
    margin: auto 25px;
    box-sizing: border-box;
  }
  .risk-active {
    color: #00ffff;
  }
  .risk-active-line {
    width: 71px;
    height: 2px;
    background: rgba(0, 255, 255, 1);
    position: absolute;
    top: 28px;
    left: 166px;
    transition: all 0.3s ease;
  }
  .risk-active-line-f {
    left: 166px;
  }
  .risk-active-line-r {
    left: 288px;
  }
}
.risk-cont {
  color: #fff;
}
</style>

需要注意的是

   transition: all 0.3s ease;
  }
  .risk-active-line-f {
    left: 166px;
  }
  .risk-active-line-r {
    left: 288px;
  }
优化后

 .risk-active-line-f {
    transform: translate3d(0, 0, 0);
  }
  .risk-active-line-r {
    transform: translate3d(120px, 0, 0);
  }

这种写法比上面相对好操作