制作潜水高度动画

var tabs = document.getElementsByClassName('tab'),
  content = document.getElementsByClassName('content');
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('change', tabChanged);
}
function tabChanged(e) {
}

.tabGroup {
  background-color: brown;
  color: yellowgreen;
}
.tabGroup > div {
  max-height: 0px;
  transition: max-height 0.5s;
  overflow: hidden;
}
#rad1:checked ~ #tab1,
#rad2:checked ~ #tab2,
#rad3:checked ~ #tab3 {
  max-height: 500px;
}

<div class="tabGroup">
  <input type="radio" name="tabGroup1" id="rad1" class="tab" checked="checked" />
  <label for="rad1">Tab 1</label>
  <input type="radio" name="tabGroup1" id="rad2" class="tab" />
  <label for="rad2">Tab 2</label>
  <input type="radio" name="tabGroup1" id="rad3" class="tab" />
  <label for="rad3">Tab 3</label>
  <div id="tab1" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="tab2" class="content">
    Tab 2 content
  </div>
  <div id="tab3" class="content">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.
  </div>
</div>

Protip：在你想要什么的问题上更具体。

无论如何，为了在两个方向上获得幻灯片效果，但保持"原始"高度，我只需将bg从文本中分离出来，复制文本(这样我就有了正确的动态高度(，并设置动画，使用z-index"记住"上一个bg高度。

可能有更好的方法(不涉及文本复制(，但我无法想象。

请注意，这是最好的重复内容方法；如果我们要用"合适"的背景进行欺骗，则需要2份而不是n份。

还要注意，这个"小部件"将始终占用510px + menu height。这是因为高度内存和保持bg内的文本需要从文档流中删除才能实现。

我建议也设计标签按钮的样式，这样就可以清楚地知道你在哪个标签上。

.tabGroup {
    color: yellowgreen;
    overflow:visible;
}
.tabGroup input.tab{
    display:none;
}
.tabGroup > .menu{
    background-color: brown;
}
.tabGroup > .bgs{
    position:relative;
    overflow:visible;
    
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.tabGroup > .bgs > .content {
    position:absolute;
    left:0;
    top:0;
    z-index:0;
    background-color: brown;
    padding:0;
    max-height: 0px;
    width:100%;
    transition: all 1s ease-in-out;
    
    color:transparent;
}
.tabGroup > .bgs > .content + .content{ background-color: #57f; }
.tabGroup > .bgs > .content:last-child{ background-color: #5f7; }
.tabGroup > .txts{
    position:relative;
    z-index:2;
    
    padding:5px 0;
    height:500px;/*so its footprint is the max size we allow*/
    width:100%;
    
    overflow:hidden;
    color:transparent;
}
.tabGroup > .txts > .content{
    position:absolute;
    top:0;
    left:-100%;
    
    padding:5px 1px;
    width:100%;
    max-height:0;
    overflow:hidden;
    
    color:black;
    
    transition:all 1s ease-in-out;
}
#rad1:checked ~ .txts > .tb1 ~ .content,
#rad2:checked ~ .txts > .tb2 ~ .content,
#rad3:checked ~ .txts > .tb3 ~ .content {
    left:100%;
}
#rad1:checked ~ div > .tb1,
#rad2:checked ~ div > .tb2,
#rad3:checked ~ div > .tb3 {
    max-height: 500px;
    left:0;
    padding-top: 5px;
    padding-bottom: 5px;
}

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab" checked="checked" />
    <input type="radio" name="tabGroup1" id="rad2" class="tab" />
    <input type="radio" name="tabGroup1" id="rad3" class="tab" />
    <div class="menu">
        <label for="rad1">Tab 1</label>
        <label for="rad2">Tab 2</label>
        <label for="rad3">Tab 3</label>
    </div>
    
    <div class="bgs">
        <div class="content tb1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
            software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="content tb2">
            Tab 2 content
        </div>
        <div class="content tb3">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
            one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
            et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
            English versions from the 1914 translation by H. Rackham.
        </div>
    </div>
    <div class="txts">
        <div class="content tb1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
            software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="content tb2">
            Tab 2 content
        </div>
        <div class="content tb3">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
            one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
            et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
            English versions from the 1914 translation by H. Rackham.
        </div>
    </div>
</div>

---

旧答案

---

只需要给可见的一个它自己的过渡规则。我将其设置为等待0.5秒，然后将其max-height转换0.5秒。

当你有多个带有过渡的样式时，你要去的状态上的transition是获胜的(就像在中一样，transition弹出式过渡会在处理任何其他效果之前立即发生(。

var tabs = document.getElementsByClassName('tab'),
  content = document.getElementsByClassName('content');
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('change', tabChanged);
}
function tabChanged(e) {
}

.tabGroup {
  background-color: brown;
  color: yellowgreen;
}
.tabGroup > div {
  max-height: 0px;
  transition: max-height 0.5s;
  overflow: hidden;
}
#rad1:checked ~ #tab1,
#rad2:checked ~ #tab2,
#rad3:checked ~ #tab3 {
  max-height: 500px;
  transition: max-height 0.5s 0.5s;
}

<div class="tabGroup">
  <input type="radio" name="tabGroup1" id="rad1" class="tab" checked="checked" />
  <label for="rad1">Tab 1</label>
  <input type="radio" name="tabGroup1" id="rad2" class="tab" />
  <label for="rad2">Tab 2</label>
  <input type="radio" name="tabGroup1" id="rad3" class="tab" />
  <label for="rad3">Tab 3</label>
  <div id="tab1" class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="tab2" class="content">
    Tab 2 content
  </div>
  <div id="tab3" class="content">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
    one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
    et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham.
  </div>
</div>