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. :)
2 answers
solution1
2 ACCPTED 2020-02-03 08:45:12
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
}
solution2
1 2020-02-03 08:46:57
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');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.