Transition from Height: 100px to 100% is ignoring transition?

Question

I have 3 text divs wich should have a hover transition with height. Example here: http://jsfiddle.net/oLr7j7w5/

There is no text in it yet so i was just wanting to give it height:auto; on hover, but if i do that the transition disappears, and it is like this:(i only changed the height from px to auto!) http://jsfiddle.net/xbpqphzz/

does anyone know how i can fix this? heres my code(i deleted the text)

<div id="extrawurstmain">
    <div id="tcontent">
        <a class="font" id="ttext">
        </a>
    </div>
    <div id="mcontent">
        <a class="font" id="mtext">
                                </a>
    </div>
    <div id="bcontent">
        <a class="font" id="btext">
        </a>
    </div>

#tcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    height: 150px;
    width: 100%;
    margin-top: 100px;
    transition: height 0.5s ease;
    overflow: hidden;

}

#mcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    width: 100%;
    height: 150px;
    transition: all 0.5s ease;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;


}

#bcontent{
    float: left;
    background-color: rgba(105, 105, 105, 0.5);
    border-bottom: 3px solid #FFD000;
    width: 100%;
    height: 150px;
    transition: height 0.5s ease;
    overflow: hidden;
}

#tcontent:hover{
    height: 250px;

}

#mcontent:hover{
    height: 250px;

}


#bcontent:hover{
    height: 250px;

}

#ttext{
    color: blue;
}

#mtext{
    color: green;
}

#btext{
    color: yellow;
}

You can't transition to/from `auto`...you might try `max-height` though, it's a common workaround. Otherwise, JS is the way to go. — Paulie_D, Jul 17 '15 at 10:32
Possible duplicate - http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto — Paulie_D, Jul 17 '15 at 10:33
@Paulie_D well you are right it's quite something similar but if i do this it starts accting realy weird... i'll just leave it and work with px — Econ, Jul 17 '15 at 10:47
`auto` is the default when `height:100%` has no reference but the issue is the same. — Paulie_D, Jul 17 '15 at 10:51

Darren Willows · Answer 1 · 2015-07-17T10:55:00.147

1

The issue is that you cant use height 100% due it not being contained.

You can either use Javascript (I would avoid):

<script>
var newheight = $('#innerdiv').css('height');
$('#mainwrapper').css('height', newheight);
</script>

or

UPDATE

div.works {
    height:20px;
max-height:20px;
    display:block;
    overflow:hidden;
    -webkit-transition: max-height 0.5s linear;
}
div.works:hover {
    height:100%;
    max-height: 200px;
    -webkit-transition: max-height 0.5s linear;
}

http://jsfiddle.net/LGDWP/168/ This method works for % but you need to set the max-height. One possibility is to set the max-height by JavaScript from the other method above.

edited Jul 17 '15 at 10:55

answered Jul 17 '15 at 10:43

Darren Willows

2,053
14
21

cannot restrict it to `max-height: 200px;`... can you test that in the actual fiddle ? – Felix A J Jul 17 '15 at 11:05
http://jsfiddle.net/LGDWP/169/ If you look at this method in fiddle the first one is restricted to 100px and the 2nd one is set to 200px. Tested on Chrome. – Darren Willows Jul 17 '15 at 11:39

David Fariña · Answer 2 · 2015-07-17T10:39:26.880

0

You cant mix the units. You can only transition from px to px, % to %, em to em... you get the idea..

However, if you really need to transition from % to px theres no way around JS animations...

edited Jul 17 '15 at 10:39

answered Jul 17 '15 at 10:30

David Fariña

1,536
1
18
28

welll but it's working... just the transition is not. – Econ Jul 17 '15 at 10:33
Yeah, the reason is that you cant transition from % to px or vice versa. Try using the same unit and it should work. Otherwise you need to to it with Javascript – David Fariña Jul 17 '15 at 10:39

Transition from Height: 100px to 100% is ignoring transition?

2 Answers2