更改内部HTML时对Div高度进行动画处理：角度

Question

我有一个包含一些内容的div。我已使用innerHtml属性绑定将内容放入了div。

我也有一个限制字符的管道和一个更多按钮。单击“更多”按钮后，将显示div中的全文。到目前为止，还可以，但是当显示全文时，高度动画并不流畅。

问题： 当div中显示全文时，如何使动画流畅？同样，当div扩展时，它也会从底部扩展到顶部。我如何才能使其仅扩展到底部？

Component.html

fill

Compoenent.css

<div
  class="text-content"
  [innerHTML]="text | summary : 150 : isCollapsed"
></div>
<div *ngIf="!isCollapsed">
  <a href="javascript:void(0)" (click)="isCollapsed = !isCollapsed"
    >read more</a
  >
</div>

管道

.text-content {
  font-weight: 400;
  font-size: 14px;
  color: #9597a8;
  margin-bottom: 0;
  height: 100%;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}