如图Tab栏切换的过渡效果

 

        
          TAB栏1
        
        TAB栏2
      

 

.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);
    }
  }