我有一个max-height of 0
的元素。我想将它转换为no max-height auto或none;无论是什么使它根据存在的元素数量扩展。 我不想使用JS也不想弯曲。
这里是jsfiddle:https://jsfiddle.net/m9pd8bjh/19/
HTML:
<nav>
<input type="checkbox" id="menu-main-checkbox" hidden>
<label class="toggler" for="menu-main-checkbox">Menu</label>
<div class="hide toggleable">
<ul>
<li>Home</li>
<li>Sample Page</li>
</ul>
</div>
</nav>
CSS:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
max-height: 68px;
}
.toggleable {
transition: visibility 1.5s ease-in-out, max-height .75s ease-in-out;
}
.toggler {
cursor: pointer
}
nav {
background: #e74c3c;
}
当我将max-height设置为68px(拟合两个列表项的高度)时,它可以完美地工作,但是当我将max-height设置为500px时,为将来的列表项留出空间,转换需要时间从500到0,使它在列表项再次消失之前延迟。
我不希望使用缩放,因为它使它复杂化,我必须提出一个解决方案来解决它下面的间距。它保持元素下的间距,并在打开时保留它。
答案 0 :(得分:1)
我发现的一个解决方法是使用带有@keyframes的动画。 请记住添加供应商前缀。
浏览器对此的支持如下: Firefox 5 +,IE 10 +,Chrome,Safari 4 +,Opera 12 +
我将你的CSS修改为:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
animation: height1 .75s forwards;
}
input[type=checkbox]:not(:checked)~.toggleable {
visibility: visible;
animation: height2 .50s forwards;
}
.toggleable {
transition: visibility 1.5s ease-in-out;
}
.toggler {
cursor: pointer
}
nav {
background: #e74c3c;
}
@keyframes height1 {
0% { max-height: 0; }
100% { max-height: 500px; }
}
@keyframes height2 {
0% { max-height: 500px; }
100% { max-height: 0; }
}
如果这样使用,再次点击时会有较小的延迟。
以下是更新的jsfiddle:https://jsfiddle.net/m9pd8bjh/25/