更好的动画最大高度CSS ONLY

Question

所以我创建了这个手风琴动画，CSS ONLY

https://codepen.io/ziad-darwich/pen/ExjGxKx

body{
margin:100px 300px
}
.accordion{
max-width:400px;
}
.tabs{
margin:5px 0;
}
.tab-heading{
background-color:#092e3d;
padding: 10px;
border-radius:3px;
font-size:.6em;
color:#fff;
cursor:pointer;
display:block;
}
.tab-heading h2{
pointer-events: none;
}
.tab-content {
background: #f3f3f3;
overflow-y: hidden;
max-height:0;
transition:max-height .5s ease-in-out;
}
.tab-content p{
margin:20px;
}
input{
display:none
}
input:checked + .tab-heading{
border-radius: 3px 3px 0 0;
}
input:checked ~ .tab-content{
max-height:200px;
border-radius:0 0 3px 3px;
}

<div class="accordion">
<div class="tabs">
<input type="radio" name="tab" id="tab1" />
<label class="tab-heading" for="tab1">
<h2>Tab 1 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus.
</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="tab" id="tab2" />
<label class="tab-heading" for="tab2">
<h2>Tab 2 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Nullam consectetur justo ut rutrum venenatis. Maecenas id mollis quam, sit amet venenatis arcu.
</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="tab" id="tab3" />
<label class="tab-heading" for="tab3">
<h2>Tab 3 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>

正如你所看到的，我正在设置选项卡内容的最大高度的动画。

所以我的想法是，如果最大高度很大，比如最大高度：1000px；在关闭选项卡时，我相信启动需要时间，因为它基本上是在为1000px设置动画；但我希望动画在触发后直接开始。

谢谢

Answer 1

在打开选项卡的transition中添加延迟，这样打开的选项卡会提前关闭一点，然后打开下一个选项卡。

body {
margin: 100px 300px
}
.accordion {
max-width: 400px;
}
.tabs {
margin: 5px 0;
}
.tab-heading {
background-color: #092e3d;
padding: 10px;
border-radius: 3px;
font-size: .6em;
color: #fff;
cursor: pointer;
display: block;
}
.tab-heading h2 {
pointer-events: none;
}
.tab-content {
background: #f3f3f3;
overflow-y: hidden;
max-height: 0;
transition: max-height .5s ease-out;
}
.tab-content p {
margin: 20px;
}
input {
display: none
}
input:checked+.tab-heading {
border-radius: 3px 3px 0 0;
}
input:checked~.tab-content {
max-height: 200px;
border-radius: 0 0 3px 3px;
transition: max-height .5s ease-in-out .5s;
}

<div class="accordion">
<div class="tabs">
<input type="radio" name="tab" id="tab1" />
<label class="tab-heading" for="tab1">
<h2>Tab 1 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus.
</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="tab" id="tab2" />
<label class="tab-heading" for="tab2">
<h2>Tab 2 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in luctus tellus. Nullam consectetur justo ut rutrum venenatis. Maecenas id mollis quam, sit amet venenatis arcu.
</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="tab" id="tab3" />
<label class="tab-heading" for="tab3">
<h2>Tab 3 Title</h2>
</label>
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>

请注意我是如何为checkedinput添加不同的转换的。我已经将其设置为在结束动画后开始，但很明显，您可以使用它。

---

编辑：转换同时开始，发生的情况是，在达到元素的实际高度之前，它是不可见的。这就是你看到延迟的原因。

假设元素的height为100px，并且正在将max-height从200px设置为0。在max-height达到100px之前，动画将不可见。

要使元素同时转换，应设置height的动画，而不是max-height的动画。然后你仍然可以添加max-height，但你将无法保持实际高度，相反，你会有一个固定的高度。假设你仍然只想去CSS。