我正在尝试在弹出的 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? .
感谢您的帮助。 :)
最佳答案
不要使用 max-height, class 进行动画。直接在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
}
关于javascript - div 扩展动画 max-height 不起作用。高度始终为 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60035537/