如图Tab栏切换的过渡效果

 

<el-menu :default-active="activeIndex" class="ev-menu-tab" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
          <span class="ev-menu-item">TAB栏1</span>
        </el-menu-item>
        <el-menu-item index="2"><span class="ev-menu-item">TAB栏2</span></el-menu-item>
      </el-menu>

 

.ev-menu-item {
    position: relative;
    z-index: 4
  }

  .ev-menu-tab.el-menu.el-menu--horizontal {
    display: flex;
    flex-direction: row;
    .el-menu-item {
      flex: 1;

      height: 70px;
      line-height: 70px;

      text-align: center;
      background-color: #EBEEF5;
      border-right: 1px solid #FFFFFF;

      cursor: pointer;

      position: relative;

      z-index: 2;
    }

    .el-menu-item:last-child {
      border-right-width: 0;
    }

    .el-menu-item.is-active {
      border-bottom-color: #FFFFFF;
    }

    .el-menu-item:after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: #FFFFFF;
      content: '';
      -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
      transition: transform 0.3s, background-color 0.3s;
      -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-perspective-origin: 50% 100%;
      perspective-origin: 50% 100%;
    }

    .el-menu-item.is-active:after {
      background-color: #FFFFFF;
      -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 0deg);
      transform: perspective(900px) rotate3d(1, 0, 0, 0deg);
    }
  }