-WEBKIT-TRANSITION 用于显示样式

Posted 2023-03-06

技术标签:

【中文标题】-WEBKIT-TRANSITION 用于显示样式【英文标题】：-WEBKIT-TRANSITION for display styles 【发布时间】：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>

【问题讨论】：

【参考方案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 可以重现类似的效果：