Div的高度动画

Question

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

问题是，首先div变为可见，然后隐藏原始div。因此，您同时查看了divs。我想要的是第一个隐藏的div，然后出现下一个div，然后才有高度动画。

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

JSFiddle

＆＃13;

＆＃13;

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) {

}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请不要发布任何JQuery建议！

Answer 1

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

无论如何，要在两个方向上获得幻灯片效果，但要保持＆＃34;原创＆＃34;高度，我只是将文本中的bg分开，复制了文本（因此我有正确的动态高度），并使用z-index来动画，并记住＆＃34;以前的bg身高。

可能有更好的方式（不会涉及文字重复），但我无法想到这一点。

请注意，这是最好的重复内容方法;如果我们要使用＆＃34;正确的＆＃34;背景

还要注意这个＆＃34;小部件＆＃34;将始终占用510px + menu height。这是因为高度内存和将文本保留在bg中需要从文档流中删除此实现。

我也建议设置标签按钮的样式，以便清楚显示哪个标签。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

OLD ANSWER

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

当你有多个带有过渡的样式时，你所要进入的状态的transition就是那个获胜的状态（就像在transition个属性过渡一样，在任何其他效果之前已处理）。

＆＃13;

＆＃13;

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) {

}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;