博客

el-tabs的结构

 <el-tabs ref="navTabs" tab-position="left" style="height: 500px; margin-top: 100px">
        <el-tab-pane v-for="item in Solution.productVoList" :key="item.id" :label='item.productName'>
          <div class="programme__item">
          内容
          </div>
        </el-tab-pane>
      </el-tabs>

**css通过@keyframes来实现动画效果 **

::v-deep是在Sass中深入修改elment ui的样式 还可以用/deep/



如果用/deep/报错 就用::v-deep

::v-deep .el-tabs__item.is-active:hover {
  background-color: rgba(0, 0, 0, 0) !important;
  z-index: 1;
  &::after {
    animation: mymove 0.8s infinite;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}
::v-deep .el-tabs__item.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 40px;
  background-color: #3b8afe;
  border-radius: 20px 0 0 20px !important;
  z-index: -2;
}
@keyframes mymove {
  0% {
    width: 100px;
    opacity: 0.1;
  }
  100% {
    width: 155px;
    opacity: 1;
  }
}
@keyframes mymove1 {
  0% {
    width: 155px;
    opacity: 1;
  }
  100% {
    width: 100px;
    opacity: 0;
  }
}

el-tabs激活改为鼠标经过hover的方法在


element ui tabs 修改成hover触发点击