如何在使用 transition 和 transform with scale 时使 div 居中

Question

我已经为我的 React 应用构建了一个弹出窗口，我不想使用任何外部库。

现在我尝试使用 transition and transform with scale 然后计算弹出窗口的宽度和高度并将其居中显示在屏幕上。

问题是，在缩放之前我无法进行计算，这导致弹出窗口在缩放操作后显示在一个地方，然后又回到中心。

弹出窗口的宽度和高度取决于屏幕尺寸和内容，所以我认为无法使用 CSS 左右。

问题如下：

const scaleUp = (element, callback) => {
  if (element) {
     element.style.transform = "scale(1)";
    element.style.transition = "transform 0.5s ease-in-out";
 
    setTimeout(() => {
      callback()
    }, 502);

  }
}


const centerScreen = () => {
   const element= document.querySelector(".popup")
  if (element) {
    var size = element.getBoundingClientRect();
    element.style.marginTop = -size.height / 2 + "px";
    element.style.marginLeft = -size.width / 2 + "px";
  }
}


function clickCenterfirst(){
centerScreen() //If i do this, it gets very wrong, testit you selef
scaleUp(document.querySelector(".popup"), centerScreen)
}

function clicktransitionfirst(){
scaleUp(document.querySelector(".popup"), centerScreen)
}

.popup {
  background: white;
  border: 1px solid gray;
  border-radius: 5px;
  position: fixed;
  margin-top: -100px;
  margin-left: -154px;
  display: block;
  min-height: 35vh;
  box-shadow: 1px 1px #f40000, 0em 0em 0.4em red;
  left: 50%;
  top: 50%;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  min-width: 300px;
  z-index: 200;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  transition: transform 0.5s ease-in-out;
}

.content{
    padding: 10px;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 35vh;
    max-height: 60vh;
}

<button onclick="clickCenterfirst()"> with center call first </button>
<button onclick="clicktransitionfirst()"> with transition call first </button>
<div class="popup">
  <div class="content">
  </div>
</div>

Answer 1

为什么不简单地从使用 translate 开始就将其居中呢？弹出窗口的大小可以使用 CSS 来制作，您已经通过使用宽度和高度的相对视口单位来做到这一点。

附带说明一下，我不会为包装器和内容元素同时设置宽度和高度，而只是对父元素应用填充。

const popup = document.querySelector('.popup');

function showPopUp() {
  popup.classList.toggle('show');
}

* {box-sizing: border-box;}

.popup {
  background: white;
  border: 1px solid gray;
  border-radius: 5px;
  position: fixed;
  display: block;
  min-height: 35vh;
  box-shadow: 1px 1px #f40000, 0em 0em 0.4em red;
  left: 50%;
  top: 50%;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  min-width: 300px;
  z-index: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease;
}

.popup.show {
  z-index: 200;
  transform: translate(-50%, -50%) scale(1);
}

.content{
    padding: 10px;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 35vh;
    max-height: 60vh;
}

<button onclick="showPopUp()"> toggle pop up </button>

<div class="popup">
  <div class="content">
  content
  </div>
</div>

如何在使用 transition 和 transform with scale 时使 div 居中

How to center a div while using transition and transform with scale

html

javascript

css

css-transitions

reactjs