Question

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

CSS-Transition：

-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。我在谷歌上发现了一些帖子，但无法找到解决方案。

感谢你的帮助。

Answer 1

要使用%和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}

Answer 2

试试这个：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>

Answer 3

简单，从高度变为最小高度或最大高度，这将更好地满足您的需求。

实施例：Fiddle

CSS从高度自动过渡到高度75％

3 个答案: