gpt4 book ai didi

javascript - -WEBKIT-TRANSITION 用于显示样式

转载 作者:太空宇宙 更新时间:2023-11-04 16:24:38 24 4
gpt4 key购买 nike

我有一个代码(简化版)。我想要“高度线性 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com