CSS) 不能使高度从 0 过渡到 100%答案

【问题标题】：CSS) cannot make height transition from 0 to 100%CSS) 不能使高度从 0 过渡到 100%
【发布时间】：2020-04-25 15:18:45
【问题描述】：

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>

这是我的代码 sn-p，上面代码中的转换不起作用。如果我将 100% 更改为某个像素单位，它工作正常，但是当我想从高度 0 过渡到高度 100% 时如何进行过渡？

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

我阅读了这篇文章并尝试使用 max-height 代替 height，但不起作用

    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>

请不要使用 jquery，javascript 解决方案只有 CSS

【问题讨论】：

let skillList = $('#Skills>ul>li'); 请不要 jquery，javascript 解决方案只有 CSS ?!?!?另外，应该为您做多少百分比？百分比对应于周围容器的尺寸，没有固定的高度。
@connexo 在这种情况下，我使用 jquery 只是为了切换类，所有动画都需要在纯 CSS 中完成。我的意思是 jquery 或 javascript 动画不是我现在正在寻找的那个。
我已经编辑了我的答案但是使用了 JS，我不知道它是否适合你。

标签： javascript css transition

【解决方案1】：

过渡高度也适用于 %

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

我给你一个解决方案，但你说 JS 不值得。

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>

【讨论】：