-WEBKIT-TRANSITION显示样式

-WEBKIT-TRANSITION for display styles

本文关键字：样式 显示 -WEBKIT-TRANSITION      更新时间：2023-09-26

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

一个auto height的例子:http://jsfiddle.net/nB5Du/

在某些情况下转换会失败:

  1. display: none
  2. height: auto

. .所以我需要改变css，使过渡工作。下面是演示:http://jsbin.com/axijaz/4

而height:auto + max-height + min-height可以复制类似的效果:

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

注意:

  1. 如果min-max有很大的不同，你可能需要打破过渡(见第2点)
  2. 仅min-height或仅max-height将仅触发一侧过渡(参见版本6和7)

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

希望能有所帮助。

相关文章：