高度属性的css过渡不适用于该元素

Question

我正在尝试从上到下进行转换，但这是行不通的。 使用此代码，转换根本不会发生-由于某种原因，我不明白为什么。

我分享我的代码：

.info {
  width: 100%;
  height: 80px;
  -webkit-transition: height 8s;
  -moz-transition: height 8s;
  -o-transition: height 8s;
  transition: height 8s;
  .info-label {
    font-size: 1.75vh;
    font-weight: bold;
  }
  .line-container {
    .line {
      border: 1px solid #452f46;
      width: 90%;
      height: 0px;
    }
    .dot {
      height: 18px;
      width: 18px;
      background-color: #452f46;
      border-radius: 50%;
    }
  }
}

<div class="info" fxLayoutAlign="center center" fxLayoutGap="15px">
  <span class="info-label">{{'HighUrgency' | translate}}</span>
  <div class="line-container" fxLayout="row" fxFlex="50" fxLayoutAlign="center center">
    <span class="dot"></span>
    <hr class='line' />
    <span class="dot"></span>
  </div>
  <span class="info-label">{{'LowUrgency' | translate}}</span>
</div>