时间戳

首页 > 解决方案 > div 从指定顶部位置展开

javascript - div 从指定顶部位置展开

问题描述

我正在尝试显示我的弹出 div，并在指定的顶部位置展开。

但是我应该打开主页中心的弹出窗口，我不知道该怎么做。

目前，我只能从主页的中心扩展到顶部和底部，这取决于弹出窗口的高度。

这就是我想要它做的事情：

┌──────────────────────────┐
│Main Page                 │
│ ┌─────────────────────┐  │            
│                          │
│                          │             
│                          │
│                          │
└──────────────────────────┘                        

┌──────────────────────────┐
│Main Page                 │
│ ┌─────────────────────┐  │
│ │popup div            │  │
│                          │
│                          │
│                          │
└──────────────────────────┘
┌──────────────────────────┐
│Main Page                 │
│ ┌─────────────────────┐  │
│ │popup div            │  │
│ │                     │  │
│ └─────────────────────┘  │
│                          │
└──────────────────────────┘

但现在：

┌──────────────────────────┐
│Main Page                 │
│                          │
│                          │
│                          │
│ │                     │  │
│                          │
│                          │
└──────────────────────────┘                        

┌──────────────────────────┐
│Main Page                 │
│                          │
│ │popup div            │  │
│ │                     │  │
│ │                     │  │
│                          │
│                          │
└──────────────────────────┘
┌──────────────────────────┐
│Main Page                 │
│ ┌─────────────────────┐  │
│ │popup div            │  │
│ │                     │  │
│ │                     │  │
│ └─────────────────────┘  │
│                          │
└──────────────────────────┘

这是我的代码。

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

var expandDiv = document.getElementsByClassName('popupLayer')[0];
expandDiv.style.display = 'block';
expandDiv.style.top = '55%';
setTimeout(function() {
    expandDiv.style.height = '55%'; 
}, 1000);

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

标签： javascripthtmlcss

解决方案

你必须删除transform: translate(-50%, -55%)

你的情况发生了什么

您的transform属性将 div 设置在父 div 的中心位置，因为高度为 0，它将从确切的中心位置开始，随着高度的增加，浏览器使其成为父 div 的确切中心

您必须指定确切的顶部位置并删除transform属性

var expandDiv = document.getElementsByClassName('popupLayer')[0];
expandDiv.style.display = 'block';
expandDiv.style.top = '27.5%';
setTimeout(function() {
    expandDiv.style.height = '55%'; 
}, 1000);
.popupLayer {
    position: absolute;
    width: 76%;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    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
}
<div class = 'popupLayer'>  
          ...// popuplayer body
    </div>

推荐阅读