最高高度的动画？
最高高度的动画？
提问于 2015-12-01 07:25:38
我有一个具有特定高度的div，当我切换“折叠”类时，如果div太高，它应该收缩到一个特定的最高高度。我一直想把这个缩小的东西生动化，但还没弄明白。我已经在网上查过了，似乎在元素中添加以下行就足够了。
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;但是，无论我将这些类分配给哪些类，它都没有工作。我有一个小提琴。
对怎么做有什么想法吗？谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-01 07:37:01
下面，我更新了您的示例。这些是解决办法：
- 您需要在
transition中添加一个要动画的属性。在你的例子中，max-height。 #rect规则覆盖了.collapsed规则，因为它具有更高的特异性。您可以使用#rect.collapsed代替。- 您需要设置一个初始
max-height和一个在这两种状态下都大于或等于max-height的任意height。
在您的示例中，我注意到您可以更容易地转换height属性，但我假设在您的实际项目中您无法？
$("#toggle").click(function() {
$("#rect").toggleClass("collapsed");
});#rect {
background-color:red;
max-height: 200px;
height: 2000px; /* arbitrary value >= max-height */
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
#rect.collapsed {
max-height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rect"></div>
<button id="toggle">hi</button>
Stack Overflow用户
发布于 2015-12-01 07:30:48
只有当您要更改的“高度”属性没有解析为transition时，才能使用auto。
我更新了你的小提琴以反映所需的更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34014806
复制相关文章
相似问题
腾讯云开发者
