CSS Transition Max-Height Back to 0 Not Working

css transition max-height back to 0 not working

Remove height:10px; from your code. it ll makes height 10px in high priority and makes overflow-hidden. thats why the animation is not working. for more details about max-height property follow this link

.animate{  font-size:20px;  max-height:10px;  width: 100px;  overflow:hidden;  -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -ms-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out;}.animate:hover{  height:auto;  max-height:1000px;}

<div class="animate">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  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.</div>

max-height transition not working when max-height is reduced

You can do this without setting a height, you jsut have to set a min-height, see below example

Note - in the normal .c state, you could set min-height to 1px if you want but it will speed up the animation because you are going from 300 to 1

.a {  height: 300px;  display: flex;  flex: 1 1 auto;  flex-direction: column;  overflow-y: auto;}
.b {  background: gray;  display: flex;  flex-direction: column;  height: 100%;  overflow-y: auto;  flex: 1 1 auto;}
.c {  max-height: 200px;  min-height: 100px;  background: slategray;  color: white;  overflow-y: hidden;  transition: 1s;}
.c:hover {  max-height: 300px;  min-height: 300px;}
.c-parent {  flex: 0 0 auto;}

<div class="a">  <div class="b">    Background DIV  </div>  <div class="c-parent">    <div class="c">      Hover over me<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>      foo bar<br>    </div>  </div></div>

Max height transition is not working when the max-height property change dynamically

Looks like the issue is this line
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2) + sub.scrollHeight...."

Your adding a string and number which will always concatinate so '123' + 4 = the string '1234'. You need to parse to an int (you also won't need to slice off the px)

//Instead of 
el.parentNode.style.maxHeight.slice(0,el.parentNode.style.maxHeight.length-2)
//Do this            
parseInt(el.parentNode.style.maxHeight)

Animating max-height with CSS transitions

In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)

CSS transition on height auto only working when adding class, not when removing class

It's the height, you are adding transition on max-height but your height changes to 0 instantly when you remove expanded class.

You can set height: auto; on the .information class with transition only on max-height.

.information{
  height: auto;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;

  &.expanded{
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }

Css transition fails after setting height to zero

Set max-height (with a height, your text will never use) instead of height:

JS

$(".preface").click(function(){
    var el = $(this).parent().find(".expandable");
    el.toggleClass("expanded");
});

CSS

.expandable {
    transition: max-height 0.5s ease-in-out;
    background-color: #f1f1f1;
    overflow: hidden;
    max-height: 0;
}

.expanded {
    max-height: 2000px;
}

Here's a fiddle with your updated code.

.expandable doesn't need style="height: 0" anymore. Unfortunately this solution messes up your transition-duration, as it calculates the time needed for max-height, not height.

CSS ease-in ease-out not working for max-height 0 and max-height auto

Unfortunately, auto values can not be animated through plain CSS.

You might want to read this CSSTricks article for some workarounds.

I would recommend using jQuery's slideDown() with the easing you want :)

CSS transition auto height not working

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

Hope this helps!

.ac-container{    width: 400px;    margin: 10px auto 30px auto;    text-align: left;}.ac-container label{    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;    padding: 5px 20px;    position: relative;    z-index: 20;    display: block;    height: 30px;    cursor: pointer;    color: #777;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);    line-height: 33px;    font-size: 19px;    background: #ffffff;    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         1px 0px 0px 0px rgba(255,255,255,0.9) inset,         0px 2px 2px rgba(0,0,0,0.1);}.ac-container label:hover{    background: #fff;}.ac-container input:checked + label,.ac-container input:checked + label:hover{    background: #c6e1ec;    color: #3d7489;    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);    box-shadow:         0px 0px 0px 1px rgba(155,155,155,0.3),         0px 2px 2px rgba(0,0,0,0.1);}
.ac-container input{    display: none;}.ac-container section{    background: rgba(255, 255, 255, 0.5);    margin-top: -1px;    overflow: hidden;    max-height: 0px;    position: relative;    z-index: 10;    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;}.ac-container section p{    font-style: italic;    color: #777;    line-height: 23px;    font-size: 14px;    padding: 20px;    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}.ac-container input:checked ~ section{    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{    max-height: 500px; /*auto*/}

<div class="ac-container">    <div>                <input id="ac-1" name="accordion-1" type="checkbox" />        <section class="ac-small">            <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>        </section>        <label for="ac-1">About us</label>            </div>    
<div>            <input id="ac-2" name="accordion-2" type="checkbox" />        <section class="ac-small">            <p>Some content... </p>        </section>        <label for="ac-2">About us</label></div></div>

---

Related Topics