div 扩展动画最大高度不起作用。高度始终为 0答案

【问题标题】：div expanding animation max-height doesn't work. always height is 0div 扩展动画最大高度不起作用。高度始终为 0
【发布时间】：2020-02-03 16:46:57
【问题描述】：

我正在尝试在弹出的 div 元素上制作扩展动画。

我想在打开主页时显示带有展开动画的弹出 div。

但是弹出的div的高度总是0。我尝试了很多方法，但没有任何效果。

代码下方，控制弹出层的高度。

    .popupLayer     //I tried setting it's height not to 0, but same.
    {
        position:absolute;

        width:76%;

        left:50%;
        top:0%;
        transform: translate(-50%, -55%);

        display:none;
        background-color:white;
        border-radius: 25px;
        overflow: hidden;
    }

    .expand{
        max-height:86%;
        transition: max-height 2s ease-in;
    }

我正在尝试使用以下代码：

window.onload = function(){
    var expandDiv = document.getElementsByClassName('popupLayer')[0];

    expandDiv.style.display='inline';
    expandDiv.style.top = '55%';

    $(expandDiv).addClass('expand');
};


<body>
    ... // some elements including popup div..
    <div class = 'popupLayer'>  
          ...// popuplayer body
    </div>
    ...
</body>

我参考了以下链接。 Expand div on click with smooth animation，How can I transition height: 0; to height: auto; using CSS?.

感谢您的帮助。 :)

【问题讨论】：

expandingDiv 在哪里？
@Allabakash 抱歉，我编辑了它。
您将显示设置为内联，它们不能有高度参数。
@Aykhan 刚看到你的评论，我把它改成了block，inline-block，两个都不行。

标签： javascript html css

【解决方案1】：

不要将 max-height 类用于动画。直接在CSS和JS中分别设置transition和height：

关键点：

在 CSS 规则中设置初始高度和过渡。
仅从 JS 增加高度。添加类不会触发 CSS 动画

JS：

    setTimeout(function() { //setTimeout is to add a delay.
        var expandDiv = document.getElementsByClassName('popupLayer')[0];
        expandDiv.style.display = 'block';
        expandDiv.style.top = '55%';
        setTimeout(function() {
            expandDiv.style.height = '55%'; // This is also for showing the animation.
        }, 1000);
    }, 4000);

CSS：

            .popupLayer {
                 position: absolute;
                 width: 76%;
                 left: 50%;
                 top: 0%;
                 transform: translate(-50%, -55%);
                 outline: 1px solid red;
                 display: none;
                 background-color: white;
                 border-radius: 25px;
                 overflow: hidden;
                 transition: height 4s ease-in;
                 height: 0; // Animation works if you set initial height
             }

演示：https://jsfiddle.net/lotusgodkk/GCu2D/6016/

【讨论】：

非常感谢！请问还有一件事，我可以从上到下展开吗？在演示中，它从中心扩展到顶部和底部。
@EugeneFitzher 是的，这是可能的。为此，不要为高度设置动画。保持高度固定。仅对底部属性进行动画处理。
你能再给我一个提示吗？昨天，它看起来很完美，但现在，它没有扩展、滑动。

【解决方案2】：

希望能帮到你。

<button id="btn">click</button>
<div class = 'popupLayer'></div>

.popupLayer
{
    position:absolute;
    width:76%;
    left:50%;
    top:0%; 
    height: 0;
    transform: translate(-50%, -55%);
    background: red;;
    border-radius: 25px;
    overflow: hidden;
    transition: all 1s ease-in;
}

.expand {
    top: 55%;
    height:50%;
}

var popupLayer = document.querySelector('.popupLayer');

document.querySelector('#btn').onclick = _ => {
    popupLayer.classList.add('expand');
}

【讨论】：