javascript - 更改内部 Html 时的动画 div 高度：角度

Question

我有一个包含一些内容的 div。我使用 innerHtml 属性绑定将内容放置在 div 中。

我还有一个用于限制字符的管道和一个阅读更多按钮。点击阅读更多按钮，显示 div 内的全文。到目前为止它很好，但是当全文显示高度动画时并不流畅。

问题： 如何在 div 中显示全文时使动画流畅？此外，当 div 扩展时，它会从下到上扩展。我怎样才能让它只扩展到底部？

组件.html

<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>

组件.css

.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;
}

管道

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "summary",
})
export class SummaryPipe implements PipeTransform {
  transform(value: string, length: number, isCollapsed?: boolean): any {
    if (isCollapsed) {
      return value;
    } else {
      //https://en.wikipedia.org/wiki/Longest_word_in_English
      const biggestWord = 50;
      const elipses = "...";

      if (typeof value === "undefined") return value;
      if (value.length <= length) return value;

      //.. truncate to about correct lenght
      let truncatedText = value.slice(0, length + biggestWord);

      //.. now nibble ends till correct length
      while (truncatedText.length > length - elipses.length) {
        let lastSpace = truncatedText.lastIndexOf(" ");

        if (lastSpace === -1) break;

        truncatedText = truncatedText
          .slice(0, lastSpace)
          .replace(/[!,.?]$/, "");
      }

      return truncatedText + elipses;
    }
  }
}

标签： javascriptangular