【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2012-12-05
      • 1970-01-01
      • 2013-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-09
      • 2015-09-16
      相关资源
      最近更新 更多