div expanding animation max-height doesn't work. always height is 0

Question

I'm trying to make expanding animation on pop-up div element.

I want to show the pop-up div with expanding animation when I just open main page.

But always pop-up div's height is 0. I tried so many ways, but nothing works.

Nowhere not below codes, controlling pop-up layer's height.

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

I'm trying with following code:

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>

I reffered following links. Expand div on click with smooth animation, How can I transition height: 0; to height: auto; using CSS? .

Thank you for your helps. :)

You set display to inline, they can't have height parameter. — Aykhan, Feb 03 '20 at 08:36
@Aykhan I just saw your comment, and I changed it into block, inline-block, both things doesn't work. — Eugene Fitzher, Feb 03 '20 at 08:38

score 2 · Accepted Answer · answered Feb 03 '20 at 08:45

Don't use max-height, class for animation. Directly set the transition and height in CSS and JS respectively:

Key points:

Set initial height and transition in the CSS rule.
Increase only height from JS. Adding class does not trigger the CSS animation

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
             }

Demo: https://jsfiddle.net/lotusgodkk/GCu2D/6016/

Thanks a lot! Excuse me for one more thing, can I expanding it from top to bottom? On the demo, it's expanding from center to top and bottom. — Eugene Fitzher, Feb 03 '20 at 08:49
@EugeneFitzher Yes, it's possible. For that, don't animate height. Keep the height fixed. animate the bottom property only. — K K, Feb 03 '20 at 08:52
Can you give me just one more hint? Yesterday, it looks like working perfect, but now, it's not expanding, sliding. — Eugene Fitzher, Feb 04 '20 at 02:38

score 1 · Answer 2 · answered Feb 03 '20 at 08:46

I hope that can help.

<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');
}

div expanding animation max-height doesn't work. always height is 0

2 Answers2