-WEBKIT-TRANSITION for display styles

Question

I have a code (simplified). I want "height linear 2s" transition. Is there way to do that using display:block and display:none property? I don't want to specify height of content.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
const classes = new Array("shown", "hidden");
const classesCount = 2;
var curClass = 0;
function switchClass() {
    document.getElementById("divel").className=classes[curClass = (curClass + 1) % classesCount];
}
</script>
<style type="text/css">
    .hidden {
        display:none;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
    }
    .shown {
        display:block;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
    }
</style>
</head>
<body>
    <button onclick="switchClass()">Press me</button>
    <div id="divel" class="shown">
        Hello World<br>
        Hello World<br>
        Hello World<br> 
    </div>

</body>
</html>

score 1 · Answer 1 · answered Apr 26 '11 at 19:18

1

basic example: http://jsfiddle.net/DNeEv/

You need to specify an exact height, however. Not sure how to do it with height:auto

An example with auto height: http://jsfiddle.net/nB5Du/

answered Apr 26 '11 at 19:18

score 0 · Answer 2 · edited May 23 '17 at 11:51

There are the cases that the transition will fail:

display: none
height: auto

..So I need to change the css to make the transition works. Here is the demo: http://jsbin.com/axijaz/4

However, height:auto + max-height + min-height can reproduce similar effect:

http://jsbin.com/axijaz/8/edit

Note:

if min-max have big different, you may need to break down the transition (see point 2)
min-height only or max-height only will trigger only one side of transition (see version 6 and 7)

Or if you are willing to use a wrapper and js code, someone already give a solution here

Hope it can help.

-WEBKIT-TRANSITION for display styles

2 Answers2