-WEBKIT-TRANSITION 用于显示样式答案

【问题标题】：-WEBKIT-TRANSITION for display styles-WEBKIT-TRANSITION 用于显示样式
【发布时间】：2011-08-13 07:25:46
【问题描述】：

我有一个代码（简化版）。我想要“高度线性 2s”过渡。有没有办法使用 display:block 和 display:none 属性来做到这一点？我不想指定内容的高度。

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

基本示例：http://jsfiddle.net/DNeEv/

但是，您需要指定准确的高度。不知道如何使用height:auto

自动高度示例：http://jsfiddle.net/nB5Du/

【讨论】：

【解决方案2】：

有些情况会导致过渡失败：

display: none
height: auto

..所以我需要更改 css 以使过渡有效。这是演示：http://jsbin.com/axijaz/4

但是，height:auto + max-height + min-height 可以重现类似的效果：

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

注意：

如果 min-max 相差很大，您可能需要分解转换（参见第 2 点）
min-height only 或 max-height only 只会触发转换的一侧（请参阅版本 6 和 7）

或者如果你愿意使用包装器和js代码，已经有人给出了解决方案here

希望对你有帮助。

【讨论】：