CODEWITHSUNDEEP
javascriptcssanimation
Horay
Horay

Reputation: 1408

Animate Height of Div

I am trying to animate the height of a div that wasn't specified a height. I'm using the max-height method, like this answer suggests.

The problem is, first the div becomes visible, then the original div gets hidden. So you're seeing both divs at once. What I want, is the first div to get hidden, then have the next div appear, and only then have the height animate.

I would rather use only css, but it seems impossible without. So I'm open to JavaScript solutions.

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>

Please don't post any JQuery suggestions!

Upvotes: 2

Views: 290

Answers (1)

abluejelly
abluejelly

Reputation: 1306

Protip: be more specific in the question about what it is you want.

Anyways, to get the slide effect in both directions but keeping the "original" height, I merely split the bg from the text, duplicated the text (so I'd have the correct dynamic heights), and animated, using z-index to "remember" the previous bg height.

There's probably a better way (that doesn't involve text duplication), but I can't think of it off the top of my head.

Note that this is the best duplicated content method; 2 copies instead of n copies if we were to dupe with "proper" backgrounds.

Also note that this "widget" will take up 510px + menu height at all times. This is because the height memory and keeping the text inside the bg required removal from document flow for this implementation.

I'd suggest styling the tab buttons as well, so it's clear which tab you're on.

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

OLD ANSWER

Just needed to give the visible one its own transition rule. I set it so it waits 0.5s then transitions its max-height for 0.5s.

When you have multiple styles with transitions, the transition on the state you're going to is the one that wins (as in, the transition poperty transitions instantly and before any other effects are processed).

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>

Upvotes: 1

Related Questions