我有一个代码(简化版)。我想要“高度线性 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>
最佳答案
基本示例:http://jsfiddle.net/DNeEv/
但是，您需要指定一个确切的高度。不确定如何使用 height:auto
自动高度示例:http://jsfiddle.net/nB5Du/
关于javascript - -WEBKIT-TRANSITION 用于显示样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5795282/