仅限CSS-从自动过渡到自动

Question

当该div的内容更改时，是否可以将div从一个自动高度转换为另一个高度？

例如： 我有一个height: auto;的div，该div包含十行文本。如果添加/删除ex，可以转换该div的高度吗？ 5行（并且该高度仍设置为自动）？

Answer 1

是...但是！

在CSS中，您无法将height: auto转换为必须提供2个值以在它们之间转换的另一个height: auto。但是，我们可以使用padding!达到几乎相同的效果。

let textContainer = document.querySelector(".content")

// Hover to change the content
textContainer.addEventListener("mouseover", function() {
  textContainer.innerHTML = "Lorem Ipsum<br> is simply dummy text<br> of the printing and typesetting<br>"
  textContainer.classList.toggle("animated")
})

// Back to its normal
textContainer.addEventListener("mouseout", function() {
  textContainer.innerHTML = "Dummy Content</br>Another Line..."
  textContainer.classList.toggle("animated")
})

.content {
  width: 150px;
  background: #e9e9e9;
  transition: all 300ms ease;
  padding: 0 10px;
}
.animated {
  padding: 20px 10px;
}

<div class="content">
  Dummy Content<br>
  Another Line...
</div>

要获得最佳结果，您可以进行以下操作：

• padding
• transition-timing-function

这可能是实现您所需要的最干净的方法！

注意：不需要使用height: auto，因为我们不依赖它。