CSS宽度过渡未显示

Question

当您将鼠标悬停在导航栏的链接之一上时，我想进行一个过渡。我希望在图片中显示的蓝色div从左向右（仅从宽度）增加，当我执行width时，我无法使用的东西，它只是显示而没有任何过渡。我要在其上创建过渡的div的类的名称为：menu-hover-bar

HTML

 <div class="dropdown" *ngFor="let item of navItems">
      <div class="dropdown-button" (click)="showSubMenu(item.label)">
        <div class="dropdown-button-row">
          <div class="label">
            <span>{{ item.label }}</span>
          </div>
          <div class="action"><i class="fa fa-caret-down"></i></div>
          <div class="menu-hover-bar"></div>
        </div>
      </div>
    </div>

CSS

.dropdown {
  display: inline-block;
  &-button {
    font-size: 16px;
    color: white;
    margin-right: 16px;
    cursor: pointer;

    .dropdown-button-row {
      position: relative;
      display: flex;
      align-items: flex-end;
      width: 100%;
      margin-top: 14px;
      margin-bottom: 14px;
      .label {
        margin-right: 4px;
      }
    }

    &:hover .menu-hover-bar {
      position: absolute;
      background-color: $csx-blue-400;
      top: 27px;
      z-index: 1;
      display: block;
      height: 4px;
      width: 100%;
      -webkit-transition: width 5s ease-in;
      transition: width 5s ease-in;
    }
  }
}