仅适用于最大高度CSS的更好的动画

Question

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

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>

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

因此，我的问题是，如果max-height非常大，例如max-height：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>

注意我如何为checked input添加不同的过渡。我将其设置为在结束动画结束后开始，但是您显然可以使用它。

---

编辑：转换是同时开始的，所发生的是直到它达到元素的实际高度为止它是不可见的。这就是为什么您看到延迟的原因。

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

要使元素具有同时过渡，应设置height而不是max-height的动画。然后，您仍然可以添加max-height，但是您将无法保留任何实际高度，而是拥有一个固定的高度。假设您仍然只想转到CSS。