导航栏菜单底部加动画横线

一 效果图

 

二 代码

<template>
  <div class="menuList">
    <div class="menuItem" v-for="(item, index) in list" :key="index" :class="[index + 1 === active ? 'isActive' : '']" @click="changeMenu(item.id)">
      <div class="menu">{{ item.id }}.{{item.name}}</div>
      <div :class="[index + 1 === active ? 'lineProgress' : '']"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuList',
  data() {
    return {
      active: 1,
      list: [
        { id: 1, name: '菜单1' },
        { id: 2, name: '菜单2' },
        { id: 3, name: '菜单3' },
        { id: 4, name: '菜单4' },
        { id: 5, name: '菜单5' },
      ],
    }
  },
  methods: {
    changeMenu(id) {
      this.active = id
      this.$emit('changeTab', id)
    }
  }
}
</script>

<style lang="less" scoped>
.menuList {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #0D0D0D;
  display: flex;
  justify-content: center;
  .menuItem {
    width: 200px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    .menu {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 0.5;
      position: relative;
    }

  }
  .isActive {
    background: #000000;
    //border-bottom:  4px solid #EB1C07;
    box-sizing: border-box;
  }
  .lineProgress {
    width: 0px;
    height: 4px;
    background: #EB1C07;
    position: absolute;
    animation:mymove 1s;
    animation-fill-mode : forwards
  }
  @keyframes mymove
    {
      from { width:0px; }
      to {  width:200px; }
    }
}
</style>

加油 加油