elementuitab切换更改为鼠标经过文字颜色和下划线是动画划过

EstherNi

已于 2023-07-29 12:37:32 修改

阅读量595

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-02-23 15:21:38 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/129182521

版权

在这里插入图片描述

<div class="data-wrap">
      <el-tabs v-model="dataActive">
        <el-tab-pane label="数据1313" name="first">
          页面1
        </el-tab-pane>
        <el-tab-pane label="132达" name="second">
          页面2
        </el-tab-pane>
      </el-tabs>
    </div>

// 数据填报tab
  dataActive: "first",

.data-wrap {
  width: 100%;
    height: calc(48% - 10px);
  .el-tabs {
    height: 100%;
    .el-tabs__header {
      margin: 0 0 0px;
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
      .el-tabs__nav-wrap {
        .el-tabs__item {
          color: #606266;
        }
        .el-tabs__item:hover {
          color: #1890ff;
          font-weight: 700;
          transition-duration: 0.3s;
        }
        .el-tabs__item::after {
          height: 2px;
          content: "";
          position: absolute;
          left: 20px;
          bottom: 0;
        }
        .el-tabs__item:nth-child(2)::after {
          width: calc(100% - 20px);
          left: 0px;
        }
        .el-tabs__item:nth-child(3)::after {
          width: calc(100% - 20px);
          left: 20px;
        }
        .el-tabs__item:hover::after {
          border-bottom: 2px solid #1890ff;
          animation-name: animation;
          animation-duration: 0.3s;
        }
        .el-tabs__item:nth-child(2):hover::after {
          border-bottom: 2px solid #1890ff;
          animation-name: animation1;
          animation-duration: 0.3s;
        }
        .el-tabs__item.is-active {
          color: #1890ff;
          font-weight: 700;
          transition-duration: 0.3s;
        }
        @keyframes animation1 {
          0% {
            left: 20px;
          }
          25% {
            left: 15px;
          }
          50% {
            left: 10px;
          }
          75% {
            left: 5px;
          }
          100% {
            left: 0px;
          }
        }
        @keyframes animation {
          0% {
            left: 0px;
          }
          25% {
            left: 5px;
          }
          50% {
            left: 10px;
          }
          75% {
            left: 15px;
          }
          100% {
            left: 20px;
          }
        }
      }
    }
    .el-tabs__content {
      height: calc(100% - 40px);
    }
  }
}