绝对定位的div上的CSS3高度过渡到自动溢出失败

复活节彩蛋

我猜这个例子是不言自明的,我也不知道为什么div首先缩小,然后弹出到正确的高度。

这是示例代码

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

和CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

这是一个小提琴链接,其内容为:http : //jsfiddle.net/3G7vG/

我在我的Linux机器上使用铬发布版本31.0.1650.63 Debian jessie / sid(238485)对此进行了测试

马贝丹

height:auto 不支持作为CSS3过渡的一部分。

您应该尝试min-heightmax-heighttransform(使用scalex(aNumberBetweenZeroAndOne)

http://jsfiddle.net/LefQV/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章