CSS) cannot make height transition from 0 to 100%

Question

let skillList = $('#Skills>ul>li');
skillList.on('click',expandSkillList);
function expandSkillList(event){
    let firstChild = $(this).children(':first');
    firstChild.toggleClass('minimized');
}

#Skills{
    background-color:darkgrey;
    color:#fff;
}
ul{
    text-align:left;
}
li ul{
        height:100%;
        transition:height 0.5s;
        overflow-y:hidden;
    }
ul.minimized{
            height:0px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
            <h1>SKILLS</h1>
            <ul>
                <li>LANGUAGE
                    <ul class="minimized">
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JAVASCRIPT</li>
                        <li>PHP</li>
                    </ul>
                </li>
                <li>FRAMEWORK/LIBRARY
                    <ul class="minimized">
                        <li>JQUERY</li>
                        <li>BOOTSTRAP</li>
                        <li>REACTJS</li>
                    </ul>
                </li>
                <li>TOOL
                    <ul class="minimized">
                        <li>WORDPRESS</li>
                    </ul>
                </li>
            </ul>
        </section>

This is my code snippet, and transition in above code doesn't work. It works fine if I change 100% to some pixel unit but how to do transition when I want to transition from height 0 to height 100%?

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

I read this post and tried max-height instead height too, but doesn't work

    let skillList = $('#Skills>ul>li');
    skillList.on('click',expandSkillList);
    function expandSkillList(event){
        let firstChild = $(this).children(':first');
        firstChild.toggleClass('minimized');
    }

    #Skills{
        background-color:darkgrey;
        color:#fff;
    }
    ul{
        text-align:left;
    }
    li ul{
            max-height:100%;
            transition:max-height 0.5s;
            overflow-y:hidden;
        }
    ul.minimized{
                max-height:0px;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
                <h1>SKILLS</h1>
                <ul>
                    <li>LANGUAGE
                        <ul class="minimized">
                            <li>HTML5</li>
                            <li>CSS3</li>
                            <li>JAVASCRIPT</li>
                            <li>PHP</li>
                        </ul>
                    </li>
                    <li>FRAMEWORK/LIBRARY
                        <ul class="minimized">
                            <li>JQUERY</li>
                            <li>BOOTSTRAP</li>
                            <li>REACTJS</li>
                        </ul>
                    </li>
                    <li>TOOL
                        <ul class="minimized">
                            <li>WORDPRESS</li>
                        </ul>
                    </li>
                </ul>
            </section>

and please, no jquery, javascript solution ONLY CSS

`let skillList = $('#Skills>ul>li');` *and please, no jquery, javascript solution ONLY CSS* ?!?!? Also, what are percentages suppsoed to do for you? Percentages correspond to the surrounding container's dimensions, which does not have a fixed height. — connexo, Apr 25 '20 at 15:26
@connexo I am using jquery just for class toggling in this case, all animations needs to be done in pure CSS. I meant jquery or javascript animation is not that which, I am looking for now. — game lover, Apr 25 '20 at 15:37
I have edited my answer but use JS, I don't know if it works for you. — Antonio Torres, Apr 25 '20 at 16:16

Antonio Torres · Accepted Answer · 2020-04-25T15:59:58.097

transition height also works with %

.container{
  width: 100px;
  height: 100px;
  border: 1px solid;
}
.child{
  width: 100%;
  height: 0%;
  background: #000;
  transition: height 1s;
}
.container:hover .child{
  height: 100%;
}

<div class="container">
  <div class="child"></div>
</div>

I leave you a solution but you said that JS is not worth it.

let mini = document.getElementsByClassName("mini");

for(var i in mini){
  if(!mini.hasOwnProperty(i)){continue;}
  mini[i].style.height = mini[i].clientHeight+"px";
  mini[i].classList.add("minimized");
}

let skillList = $('#Skills>ul>li');
skillList.on('click',expandSkillList);
function expandSkillList(event){
    let firstChild = $(this).children(':first');
    firstChild.toggleClass('minimized');
}

*{
height: auto;
}
#Skills{
    background-color:darkgrey;
    color:#fff;
}
ul{
    text-align:left;
    
}
li ul{
        
        transition:height 0.5s;
        overflow-y:hidden;
    }
ul.minimized{
  height: 0px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Skills">
            <h1>SKILLS</h1>
            <ul>
                <li>LANGUAGE
                    <ul class="mini">
                        <li>HTML5</li>
                        <li>CSS3</li>
                        <li>JAVASCRIPT</li>
                        <li>PHP</li>
                    </ul>
                </li>
                <li>FRAMEWORK/LIBRARY
                    <ul class="mini">
                        <li>JQUERY</li>
                        <li>BOOTSTRAP</li>
                        <li>REACTJS</li>
                    </ul>
                </li>
                <li>TOOL
                    <ul class="mini">
                        <li>WORDPRESS</li>
                    </ul>
                </li>
            </ul>
        </section>

CSS) cannot make height transition from 0 to 100%

1 Answers1