1

I'm having a bit of a hard time solving this CSS transition issue with auto height and wondering if others would have any clues and suggestions. Thanks in advance.

  1. Here is an example of auto height which I'm trying to make work but the transition does not work but the auto height is ideal with the responsive site:

http://jsfiddle.net/z5x6abog/

Javascript:

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

CSS:

.test.collapse ul {
height: auto;
  1. Here is an example with a specific height with specific pixels but please note this is not ideal as the site is responsive and the height will always change due to the floating list:

http://jsfiddle.net/obn34ufx/

CSS:

.test.collapse ul {
height: 500px;

Would anyone know of a way to make example #1 work?

Thanks!

Chumtarou
  • 313
  • 5
  • 15
  • 1
    this might help: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto – Pevara Jan 26 '15 at 23:03

3 Answers3

2

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");
    });
});
tiffon
  • 5,040
  • 25
  • 34
Chumtarou
  • 313
  • 5
  • 15
  • Thanks. Doesn't work when I set it to `max-height: 9999px`, but does work with `max-height: 999px`... – Moe Feb 22 '17 at 14:46
2

It is not possible to use transitions with height:auto. The trick with max-height is a pretty good solution but has some inconvenience, especially a weird delay if max-height is much higher than the real height.

Here is the trick I use : http://jsfiddle.net/g56jwux4/2/ Basically it is two imbricated DIVs translating in opposite directions. Take a look a the code at jsfiddle because my english is not good enough to explain it clearly.

HTML part:

<body>
  <p>Technicaly this dropdown menu looks like a simple height transition.</p>
  <p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
    <input type="checkbox" id="menuOpen"></input>
    <label id="bouton" for="menuOpen"><span>Click on me !</span>
        <div id="menu">
            <div id="masque">
                <div class="choix" id="choix1">Choix 1</div>
                <div class="choix" id="choix2">Choix 2</div>
                <div class="choix" id="choix3">Choix 3 tr&egrave;s tr&egrave;s long pour voir la taille finale du menu</div>
                <div class="choix" id="choix4">Choix 4</div>
                <div class="choix" id="choix5">Choix 5</div>
                <div class="choix" id="choix6">Choix 6</div>
            </div>
        </div>
    </label>
</body>

CSS Part :

body {
    font-family: sans-serif;
}
#menuOpen {
    display: none;
}
#bouton {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 30px;
    background-color: lightgray;
    cursor: pointer;
}
#bouton > span {
    color: black;
    padding: 6px;
    line-height: 30px;
}
#menu {
    position: absolute;
    top: 100%;
    overflow: hidden;
    min-width: 100%;
    transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
    transform: translateY(-100%);
    visibility: hidden;
    color: white;
}
#menuOpen:checked + #bouton > #menu  {
    transform: translateY(0%);
    visibility: visible;
    transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
    transform: translateY(0%);
}
#masque {
    position: relative;
    background-color: gray;
    transform: translateY(100%);
    transition: transform 0.3s linear 0s;
}
.choix {
    white-space: nowrap;
    padding: 3px 6px;
}
.choix:hover {
    background-color: darkgray; 
}
Joël Hecht
  • 1,766
  • 1
  • 17
  • 18
0

Try something like below. Go by the LI and the height so that nothing will be cut off. Adjust as needed.

$(document).ready(function(){
  $(".button").click(function(){
    $(".test").toggleClass("expand", 5000);
  });
});
.test ul {
width:50%;
overflow:hidden;
height:auto;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.test li {
float:left;
width:100px;
}

.test li:not(:nth-of-type(-n+10)) {
width:100px;
    display: none;
}

.test.collapse ul {
width:50%;
height: 500px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}


.test.expand ul li {
    display: block;
  
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
    <ul>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
        <li>Malesuada</li>
        <li>Pellentesque</li>
        <li>ulum tortor</li>
        <li>amet quam</li>
    </ul>
 <a href="#" class="button">Toggle</a>
</div>
Sleek Geek
  • 4,638
  • 3
  • 27
  • 42
  • Thanks Sleek Geek, unfortunately it appears the transition does not appear on Safari. I'll be sure to look at your code in more depth though but wanted to mention I was able to solve the issue with help from comment by Pevara. Here is an example: http://jsfiddle.net/jhqvL4q0/ – Chumtarou Jan 27 '15 at 02:13