html - 从固定高度到悬停时自动

Question

我想在悬停时显示一些文本，从固定高度到 child 的全高，但似乎无法实现。

这是片段:

.c1 {
    width: 50%;
    max-height: 100px;
    background: red;
    overflow:hidden;
    transition: max-height 4s ease-in;
}

.c1:hover {
    max-height: auto;
}

<div class="c1">
  <div style="width:auto;height;300px">
    text text text text text text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text texttext text texttext text texttext 
    text texttext text texttext text texttext text texttext text 
    texttext text texttext text text
</div>
  </div>

我希望红色区域慢慢向下扩展以显示其余文本。有什么想法吗？

Answer 1

您的问题是最大高度没有值 auto。

你要找的是 max-height: none，但是它不是可动画的。要为这个过渡动画，你必须给它一个特定的高度。

如果你将你的 Css 悬停类更改为此

.c1:hover {
    /* No Animation*/
    max-height: none;
}

或

.c1:hover {
    /* With Animation*/
    max-height: 300px;
}

来自 CSS Tricks 的 Chris Coyier 正在谈论它。 https://css-tricks.com/css-animate-fromto-auto/

现在，您真的不应该使用内联 CSS 和链接 CSS。并且有一些冗余代码，例如您根本不需要添加的内联 css。