javascript - Div 的动画高度

Question

我正在尝试为未指定高度的 div 设置高度动画。我正在使用 max-height 方法，例如 this answer建议。

问题是，首先 div 变得可见，然后原始的 div 被隐藏。所以您会同时看到两个 div。我想要的是第一个隐藏的 div，然后显示下一个 div，然后才使高度动画化。

我宁愿只使用 css，但没有它似乎是不可能的。所以我对 JavaScript 解决方案持开放态度。

JSFiddle

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>

请不要发布任何 JQuery 建议!

Answer 1

提示:在关于您想要什么的问题中更具体。

无论如何，为了在两个方向上获得滑动效果但保持“原始”高度，我只是将 bg 从文本中分离出来，复制文本(这样我就有了正确的动态高度)，并使用 z-index 来“记住”之前的 bg 高度。

可能有更好的方法(不涉及文本重复)，但我想不出来。

注意这是最好的复制内容的方法；如果我们要用“适当”的背景进行欺骗，则为 2 个副本而不是 n 个副本。

另请注意，此“小部件”将始终占用 510px + 菜单高度。这是因为高度内存和将文本保留在 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>