CSS从高度自动过渡到高度75％[重复]答案

【问题标题】：CSS Transition from height auto to height 75% [duplicate]CSS从高度自动过渡到高度75％[重复]
【发布时间】：2014-02-04 00:10:35
【问题描述】：

我做了一个 CSS 过渡，从高度自动到高度：75%。

CSS 过渡：

-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

但它不适用于 IE 和 Firefox。我在google上找到了一些帖子，但找不到解决方案。

感谢四位的帮助。

【问题讨论】：

如果我的回答没有用，请提供更多代码，或者更好的 JSFiddle 示例。

标签： css height transition

【解决方案1】：

试试这个：transition example

CSS：

.tran{
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    height: 100px;
    background: #e5e5e5;
    height: 100%;
}

.tran:hover{
    height: 300px;
}

HTML：

<div style="height: 200px;">
    <div class="tran">
        Example
    </div>
</div>

【讨论】：

@user2207770 这是否回答了您的问题？如果是，请接受答案。

【解决方案2】：

要使用% 和auto，您可以像这样尝试使用min-height：

div {
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
div:hover {
  min-height:75%;
}

检查这个Demo Fiddle

_{在 Chrome 31 -- Firefox 26 中测试}

【讨论】：

【解决方案3】：

简单，从高度更改为最小高度或最大高度，什么会更好地满足您的需求。

例如：Fiddle

【讨论】：