使用动态内容计算 div 的高度以进行变换动画答案

【问题标题】：Calculate height of div with dynamic content for transform animation使用动态内容计算 div 的高度以进行变换动画
【发布时间】：2020-08-12 04:16:19
【问题描述】：

我有一个固定起始高度的容器，它只覆盖<ul> 容器（参见 HTML/JS）。如果按下按钮/链接，则该容器应通过向container div 添加一个类来扩展，并扩展以适应整个容器的内容。这可以通过使用属性height: auto 来实现，但是，如果我想要一个过渡效果，例如transition: height 0.2s ease-in auto 属性不起作用。需要注意的是，<ul> 下面的内容是动态的。所以它可能比这里看到的要多得多。那么如何获取容器的高度，并将其输入到is-active CSS 类中（我使用的是 Angular）？

HTML/JS：

<div [ngClass]="toggleState ? 'container is-active' : 'container'">

    <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a (click)="toggleState = !toggleState">Item 3</a></li>
    </ul>

    <div class="extra-dynamic-content">Lorem ipsum</div>        

</div>

CSS：

.container {
    height: 100px
}

.container .is-active {
    height: 200px;

【问题讨论】：

标签： css angular

【解决方案1】：

通过 Viewchild 注解可以获取页面的 elementRef，通过 elementRef 可以访问 DOM 中的属性。

但是你不能改变模板的scss/css文件，这个文件是静态编译的。所以如果你想改变元素的样式，请使用 ngStyle（或直接使用插值的样式）。

【讨论】：