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

游戏爱好者

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>

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

我如何过渡高度：0；到高度：自动；使用CSS？

我读了这篇文章并尝试了 max-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

安东尼奥·托雷斯占位符图像

过渡高度也适用于 %

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。