仅CSS -从auto过渡到auto
仅CSS -从auto过渡到auto
提问于 2018-10-02 20:24:27
当div的内容发生变化时，是否可以进行从一个自动高度到另一个自动高度的div转换？
例如:我有一个包含height: auto;的div，该div包含10行文本。如果我添加/删除ex，我可以转换该div的高度吗？5行(仍然将高度设置为自动)？
回答 1
Stack Overflow用户
发布于 2018-10-02 20:59:02
这是..。但!
在CSS中，你不能将一个height: auto转换成另一个height: auto，你必须提供2个值才能在它们之间转换。然而，我们可以使用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>
要获得最佳结果，您可以操作以下内容：
paddingtransition-timing-function
这可能是实现您所需的最干净的方法！
注意:不需要使用height: auto，因为我们不依赖它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52608286
复制相关文章
相似问题
腾讯云开发者
