css3 height transition on an absolute positioned div to overflow auto fails [duplicate]

问题

this example is pretty selfexplanatory i guess, and i have no idea, why the div first shrinks, and than pops to the right height.

here is the example code

<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>

and the 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; }

and here is a fiddle link, with the content: http://jsfiddle.net/3G7vG/

i test this with the chromium release Version 31.0.1650.63 Debian jessie/sid (238485) on my linux box

回答1:

height:auto is not support as part of a transition in css3.

You should rather try min-height, max-height, or transform (using the scalex(aNumberBetweenZeroAndOne))

http://jsfiddle.net/LefQV/

回答2:

Because you set the height of the div.abs to 40px

height: 40px;

Changed it to auto

 height:auto;

The full style is

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

回答3:

trying using this as your css:

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try this

来源：https://stackoverflow.com/questions/21750418/css3-height-transition-on-an-absolute-positioned-div-to-overflow-auto-fails

标签

html

css

css3

css-transitions