如何使用过渡和规模转换时如何将DIV集中

Question

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

现在我尝试使用过渡和缩放变换，然后计算弹出窗口的宽度和高度并将其在屏幕上居中。

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

弹出窗口的宽度和高度取决于屏幕尺寸和内容，因此无法使用 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>