vue tab 切換動畫

效果如圖

code

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

<script>
export default {
  name: "Computational-Index",
  components: {},
  data() {
    return {
      tabList: ["開票列表", "審核列表"],
      activeIndex: 0,
    };
  },
  methods: {
    tabChange(val) {
      this.activeIndex = val; 
      this.$router.push({   //新增一個參數
          query:{tabsid:val}
      });

    },
  },
  created() {
    if (this.$route.query.tabsid) {  
      this.activeIndex = this.$route.query.tabsid;
    }
  },
};
</script>
<style lang="scss" scoped >
.risk-tab-top {
  color: rgba(138, 144, 155, 1);
  display: flex;
  width: 100%;
  position: relative;
  .risk-tab-cont {
    cursor: pointer;
    text-align: center;
    padding: 16px 32px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .risk-active {
    color: #000;
    background: #fff;
  }
  .risk-active-line {
    width: 128px;
    height: 3px;
    background: rgba(76, 147, 255, 1);
    position: absolute;
    bottom: 0px;
    transition: all 0.3s ease;
  }
  .risk-active-line-f {
    transform: translate3d(0px, 0, 0);
  }
  .risk-active-line-r {
    transform: translate3d(128px, 0, 0);
  }
}
</style> 

如果有多個
則修改

  <div  class="risk-active-line"   :class="[ activeIndex == 0 ? 'risk-active-line-f' : 'risk-active-line-r']"  />
         

修改為

  <div  class="risk-active-line"  :style="'transform: translate3d('+activeIndex*128+'px, 0, 0);'"  />

刪除 多余css 樣式

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

原文如下,再此基礎上進行了路由值調整,這樣刷新了也還能保存tab記錄

https://blog.csdn.net/qq_37807767/article/details/114698542