左侧导航点击滑动效果

最主要的是transition: transform .3s cubic-bezier(.645,.045,.355,1);，让切换tab有一个滑动的动画效果，完整组件代码：

<template>
  <div class="module_box">
    <div class="module_title">
      <img src="../../../assets/img/analysis/icon-analysis.png" width="30"/>
      <span>我的分析模块</span>
    </div>
    <div v-if="isActive!=-1" class="tab__active-bar" :style="'transform: translateY('+topVal+'px); height: 50px;'"></div>
    <ul class="tab-box">
      <li v-for="(item, index) in analysisModule" :key="item.code" :class="{'is_active':isActive==item.code}">
        <a href="javascript: void(0);" @click="handleTab(item)">{{ item.name }}</a>
      </li>
    </ul>
    <div class="module_title" style="border-top: 1px #dddddd solid;">
      <img src="../../../assets/img/analysis/icon-aggregate.png" width="30"/>
      <span>我的集合模块</span>
    </div>
    <ul class="tab-box">
      <li v-for="(item, index) in aggregateModule" :key="item.code" :class="{'is_active':isActive==item.code}">
        <a href="javascript: void(0);" @click="handleTab(item)">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: "myModule",
      data() {
        return {
          analysisModule: [{
            code: '1', name: '预置分析模块'
          }, {
            code: '2', name: '常用分析模块'
          }, {
            code: '3', name: '历史分析模块'
          }],
          aggregateModule: [{
            code: '5', name: '自定义期刊集合'
          }, {
            code: '6', name: '自定义高校集合'
          }],
          isActive: 1,
        };
      },
      computed: {
        topVal() {
          return this.isActive*50
        }
      },
      methods: {
        handleTab(item) {
          this.isActive = item.code
          this.$emit('handleTab', item.name)
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import url("../../../common/css/institution.css");
  @import url("../../../common/css/mainStyle.css");
  @import url("../../../assets/css/element-reset.css");
  .module_box {
    position: relative;
    margin-top: 10px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0px 3px 13px 0px rgba(13, 30, 122, 0.2);
    box-shadow: 0px 3px 13px 0px rgba(13, 30, 122, 0.2);

    .module_title {
      padding: 0 10px;
      box-sizing: border-box;
      height: 50px;
      line-height: 52px;
      border-bottom: 1px #dddddd solid;

      img {
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
        font-size: 16px;
        color: #1d97ff;
      }
    }

    .tab-box {
      list-style: none;

      li {
        height: 50px;
        line-height: 50px;

        a {
          padding: 0 10px 0 43px;
          box-sizing: border-box;
          display: inline-block;
          width: 100%;
          font-size: 14px;
          color: #333333;
          cursor: pointer;
        }

        &.is_active {
          background-color: #f3f6ff;
        }
      }
    }

    .tab__active-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      background-color: #1d97ff;
      z-index: 1;
      transition: transform .3s cubic-bezier(.645,.045,.355,1);
      list-style: none;
    }
  }
</style>