制作儿童内容的div大小 - 包括边距

Question

我有一个包含可配置内容的div（但可能是段落的文字），我遇到了一个动画高度的问题。

这是我的动画（漂亮和慢下来），从高度0到它的计算高度，根据它的内容：

最后看到“跳”？

经过一番调查，我认为我已经解决了这个问题。我正在动画包含html元素的div（Angular 2，但它与问题无关）：

<div [@visibilityStateTrigger]="visibilityState" style="display: block">
    <ng-content></ng-content>
</div>

ng-content是孩子们去的地方，可见性状态是动画触发器。重要的是它是一个div，它包含了孩子。

我的假设（对网络开发不熟悉）就是div会根据孩子的内容进行调整。它似乎直到我给它制作动画并看到了这个奇怪的步骤，并在铬检查中看了一眼：

这是div：

<div _ngcontent-8027-15="" style="display: block; opacity: 1;">
  <p _ngcontent-8027-11="">
     Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
  </p>        
</div>

这是内容：

签约时，只需将高度和不透明度设置为0：

<div _ngcontent-8027-15="" style="display: block;height: 0px;opacity: 0;">
   <p _ngcontent-8027-11="">
      Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
   </p>
</div>

然而，这是问题所在的中间阶段。我认为由于它执行动画的方式。

但是，我知道，如果div的高度与内容的高度相匹配，则不是问题。由于我动画父div不是子组件，因此动画中只使用div的高度。

我发现了一个尴尬的解决方案：使用填充而不是边距。但是，这涉及从不在我可能想要放入此组件的任何样式上使用margin - 并重新设置每个html样式以使用填充而不是边距。

有没有办法告诉我的div根据孩子的全尺寸来确定它的大小，包括保证金？

Answer 1

你是否试过让孩子的clientHeight onclick并将其应用到父母身高？

this.on('click', function() {
    var childHeight = parentDiv.children()[0].clientHeight;

    parentDiv.style.height = childHeight + 'px';  
});

Answer 2

我找到了一种方法，但感觉有点hacky。但是，它很高兴Angular 2不愿意使用DOM。

我只是在子内容之后添加一个项目。该项目没有任何余地，但只要它存在，父级的高度就可以容纳它。

像这样：

我已经将项目5和5做成了红色，因此可以看到行为：

<div [@visibilityStateTrigger]="visibilityState" style="display: block">
    <ng-content></ng-content>
    <div style="background-color: red; width: 5px; height: 5px;"></div>
</div>

但只要它至少1px乘1px并因此显示，它一切正常。