CSS过渡动画不显示答案

【问题标题】：CSS transition animation not displayingCSS过渡动画不显示
【发布时间】：2014-04-26 14:17:50
【问题描述】：

大家好。感谢阅读和回复！

我正在尝试更改悬停时 div 的高度，以显示更多被溢出截断的内容：隐藏（尝试了文本溢出省略号，但失败得很惨……虽然不同的任务！）我的悬停属性工作正常，但是我想包括一个过渡动画，因为只是跳开一个 div 会让人分心。可惜没有这样的运气。

虽然我不太清楚我在哪里失败。

.technique_container{
width: 595px;
height: auto;
}

.techpic {
padding: 15px 0px 5px 10px;
width: 15%;
float: left;
height: 100px;
}
.techpic img {border-radius: 15%; margin-top: 15px;}

.technique {
width: 80%;
margin-left: 110px;
height: 118px;
overflow: hidden;
transition: height 1.0s; /* Animation time */
    -webkit-transition: height 1.0s; /* For Safari */
}

.technique:hover {height: auto;}

看起来像是一个基本的 CSS 属性，但缺少什么？

这也是一个很好的资源http://jsfiddle.net/BenedictLewis/K6zCT/ :)

谢谢！

【问题讨论】：

这个例子正确吗？我没有看到类 technique 的元素。
该链接指向资源，而不是相关代码。 @JoshCrozier
该链接仅指向我用作参考的资源 :) 不包含我的任何内容或上述内容
@BR89 好吧，你的问题是你不能将一个元素转换到auto 的高度。看到这个问题：stackoverflow.com/questions/3508605/…
@JoshCrozier Gah，这很不幸。感谢您的提醒。可悲的是，所有高度都是可变的，具体取决于内容的数量。有些有 3 行，有些有 20 行。如果没有 JQuery，可能就无法解决。感谢您的意见！

标签： html css animation transition

【解决方案1】：

您无法转换到height:auto;。我已经成功地转换了max-height（将height:auto 替换为max-height:900px; 或某个肯定大于预期高度的数字）。

【讨论】：

如果它只是一个 div 那将是一个很好的解决方法。不幸的是，我有大约 15 个这样的人堆积了不同级别的内容。为所有这些设置一个最大高度对于扩展只有 5 行文本的 div 来说会很麻烦
我感觉到你了。 jQuery 可能是您最好的选择。老实说，Bootstrap's Collapse Plugin 在这种情况下非常方便。（也需要他们的过渡插件。）

【解决方案2】：

正如@BR89 所说，您不能将元素转换为auto 的height，但可以将其转换为max-height。

.technique {
    width: 80%;
    margin-left: 110px;
    max-height: defaultHeight;
    overflow: hidden;
    transition: max-height 1.0s; /* Animation time */
    -webkit-transition: max-height 1.0s; /* For Safari */
}

.technique:hover {max-height: someLargeNumber;}

注意：someLargeNumber 必须超过.technique 的最大可能高度（即9999px）

(http://css3.bradshawenterprises.com/animating_height/)

【讨论】：