CSS Transition Auto Height Not Working

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>

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

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {    max-height: 0;    transition: max-height 0.15s ease-out;    overflow: hidden;    background: #d5d5d5;}
#menu:hover #list {    max-height: 500px;    transition: max-height 0.25s ease-in;}

<div id="menu">    <a>hover me</a>    <ul id="list">        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>        <li>item</li>    </ul></div>

Why this CSS3 transition on height does not work

I think you need to set a specific height instead of auto for the transition to happen on height.

.collapse {
    height: 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 1.35s ease;
    -moz-transition: height 1.35s ease;
    -o-transition: height 1.35s ease;
    transition: height 1.35s ease;
    background-color: #cecece;
}
.collapse.in {
    height: 200px; /*Set the height here*/
}

Demo

Or another option transition on max-height, like a max-height that is near impossible.

.collapse {
    max-height:0px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-in-out;
    -moz-transition: max-height 0.35s ease-in-out;
    -o-transition: max-height 0.35s ease-in-out;
    transition: max-height 0.35s ease-in-out;
    background-color: #cecece;
}
.collapse.in {
    max-height:1000px;
}

Demo2

Here is a quote from this page:

Transitioning gradients:
Not every CSS property can be transitioned, and the basic rule is that you can only transition through absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant.

CSS toggle transition animation with auto height not working

Thanks for everyone's feedback. Here is the final solution I went with which allows for a responsive and smoother toggle:

http://jsfiddle.net/jhqvL4q0/4/

$(document).ready(function(){
    $(".button").click(function(){
        $(".collapse-list").toggleClass("collapse");
    });
});

No CSS transition for 'height: fit-content'

As Mishel stated another solution is to use max-height. Here is a working example of that solution.

The key is to approximate your max-height when it is fully expanded, then the transitions will be smooth.

Hope this helps.

https://www.w3schools.com/css/css3_transitions.asp

document.querySelector('button')  .addEventListener(    'click',    () => document.querySelectorAll('div')      .forEach(div => div.classList.toggle('closed')));

div {  background-color: lightblue;  border: 1px solid black;  overflow-y: hidden; max-height: 75px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(1, 1, 1, 1);}div.closed {   max-height: 0;}

<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1><div class="div1">some text<br />even more text<br />so much text</div>
<br>
<h1>'height: fit-content' => 'height: 0'</h1><div class="div2">some text<br />even more text<br />so much text</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>

css3 height transition not working

I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/ this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.

CSS Transition Auto Height Not Working