纯CSS3动画到高度：自动；实施

只是想让你知道。我想到了如何最大限度地应对CSS3的圣杯——动画。参见我的示例：

<style>

* {
  margin: 0;
  -webkit-transform: translate3d(0,0,0);
}

input[type="radio"] {
  display: none;
}

label {
  transform: translateY(100%);
  display: block;
  transition: all 0.5s cubic-bezier(.22,.61,.36,1);
  background-color: white;
  will-change: transform;
}

label[for^=radio1] {
  transform: translateY(0);
}

.outer {
  overflow: hidden;
}

.mid {
  transform: translateY(-100%);
  transition: all 0.5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.inner.absolute {
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

ul, .inner { 
  visibility: hidden;
}

ul.absolute {
  position: absolute;
  visibility: visible;
  bottom: 0;
}

input[type="radio"]:checked + label .outer .mid label .outer .mid label {
  transform: translateY(100%);
}

input[type="radio"]:checked + label .outer .mid label .outer .mid,
input[type="radio"]:checked + label .outer .mid .inner.absolute, .inner.absolute:last-child {
  transform: translateY(-100%);
}

input[type="radio"]:checked + label .outer .mid,  input[type="radio"]:checked + label .outer .mid label, 
input[type="radio"]:checked + label .outer .mid label .outer .mid .inner.absolute:not(:last-child) {
  transform: translateY(0);
}

</style>


<input id="radio1" type="radio" name="toggle"></input>
<label for="radio1">
  <p>Test 1</p>
  <div class="outer">
    <div class="mid">
     <div class="inner">
      <ul>
        <li>Test A</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
      </ul></div><div class="inner absolute"><ul class="absolute">
        <li>Test A</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
        <li>Test B</li>
        <li>Test C</li>
      </ul></div>
      <input id="radio2" type="radio" name="toggle"></input>
      <label for="radio2">
        <p id="p2">Test 2</p>
        <div class="outer">
          <div class="mid">
           <div class="inner">
            <ul>
              <li>Test A</li>
              <li>Test B</li>
              <li>Test C</li>
            </ul></div><div class="inner absolute"><ul class="absolute">
              <li>Test A</li>
              <li>Test B</li>
              <li>Test C</li>
            </ul></div>
            <input id="radio3" type="radio" name="toggle"></input>
            <label for="radio3">
              <p id="p2">Test 3</p>
              <div class="outer">
                <div class="mid">
                 <div class="inner">
                  <ul>
                    <li>Test A</li>
                  </ul></div><div class="inner absolute"><ul class="absolute">
                    <li>Test A</li>
                  </ul></div>
                  <input id="radio4" type="radio" name="toggle"> </input>
                  <label for="radio4">
                    <p id="p2">Test 4</p>
                    <div class="outer">
                      <div class="mid">
                       <div class="inner">
                        <ul>
                          <li>Test A</li>
                          <li>Test B</li>
                          <li>Test C</li>
                          <li>Test B</li>
                          <li>Test C</li>
                        </ul></div><div class="inner absolute"><ul class="absolute">
                          <li>Test A</li>
                          <li>Test B</li>
                          <li>Test C</li>
                          <li>Test B</li>
                          <li>Test C</li>
                        </ul></div>
                        <input id="radio5" type="radio" name="toggle"></input>
                        <label for="radio5">
                          <p id="p2">Test 5</p>
                          <div class="outer">
                            <div class="mid">
                             <div class="inner">
                              <ul>
                                <li>Test A</li>
                                <li>Test B</li>
                                <li>Test C</li>
                                <li>Test B</li>
                                <li>Test C</li>
                                <li>Test C</li>
                              </ul></div><div class="inner absolute"><ul class="absolute">
                                <li>Test A</li>
                                <li>Test B</li>
                                <li>Test C</li>
                                <li>Test B</li>
                                <li>Test C</li>
                                <li>Test C</li>
                              </ul></div>
                            </div>
                          </div>
                        </label>
                      </div>
                    </div>
                  </label>
                </div>
              </div>
            </label>
          </div>
        </div>
      </label>
    </div>
  </div>
</label>
</div>
</div>
</label>

* {
保证金：0；
-webkit转换：translate3d（0,0,0）；
}
输入[type=“radio”]{
显示：无；
}
标签{
转化：translateY（100%）；
显示：块；
过渡：所有0.5s三次贝塞尔（.22、.61、.36,1）；
背景色：白色；
改变：转变；
}
标签[for^=radio1]{
变换：translateY（0）；
}
.外部{
溢出：隐藏；
}
.中{
转换：translateY（-100%）；
过渡：所有0.5s三次贝塞尔（.22、.61、.36,1）；
改变：转变；
}
.绝对的{
身高：100%；
宽度：100%；
位置：绝对位置；
过渡：所有0.5s三次贝塞尔（.22、.61、.36,1）；
改变：转变；
}
ul，.inner{
可见性：隐藏；
}
绝对的{
位置：绝对位置；
能见度：可见；
底部：0；
}
输入[type=“radio”]：选中+标签。外部。中间标签。外部。中间标签{
转化：translateY（100%）；
}
输入[type=“radio”]：选中+label.outer.mid label.outer.mid，
输入[type=“radio”]：选中+label.outer.mid.inner.absolute、.inner.absolute:最后一个子项{
转换：translateY（-100%）；
}
输入[type=“radio”]：选中+标签.outer.mid，输入[type=“radio”]：选中+标签.outer.mid标签，
输入[type=“radio”]：选中+标签。外部。中间标签。外部。中间。内部。绝对值：非（：最后一个子项）{
变换：translateY（0）；
}
测试1


测试A
测试B
测试C
测试B
测试C
测试B
测试C
测试B
测试C

测试A
测试B
测试C
测试B
测试C
测试B
测试C
测试B
测试C

测试2


测试A
测试B
测试C

测试A
测试B
测试C

测试3


测试A

测试A

测试4


测试A
测试B
测试C
测试B
测试C

测试A
测试B
测试C
测试B
测试C

测试5


测试A
测试B
测试C
测试B
测试C
测试C

测试A
测试B
测试C
测试B
测试C
测试C

---

我已经在生产中使用了这段代码更复杂的版本，所以它不仅仅是PoC。问候

所以。。。问题是什么？自动回答可以，但必须使用堆栈溢出时预期的问答格式。张贴一个问题，突出需要解决的问题，然后作为答案提供答案，而不是在问题本身中。否则此线程将被关闭。。。。但是，由于这个问题已经被问了很多次，所以最好将您的解决方案添加为现有问题的答案。例如：对不起，我无法在其他主题上发布答案，因为我需要在堆栈上加10分才能完成这项工作，这是我的第一篇帖子。将来会做得更好：）