He creado una ventana emergente para mi aplicación React y no quiero usar ninguna biblioteca externa.
Ahora estoy tratando de usar la transition and transform with scale y luego calcular el ancho y la altura de la ventana emergente y centrarla en la pantalla.
El problema es que no puedo hacer cálculos antes de que se complete la escala, y eso hace que la ventana emergente se muestre en un lugar después de la operación de escala y luego vuelva al centro.
El ancho y la altura de la ventana emergente dependen del tamaño y el contenido de la pantalla, por lo que no puedo hacerlo con CSS o eso creo.
Aquí está el problema a continuación:
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>¿Por qué no simplemente centrarlo desde el principio usando translate ? El tamaño de su ventana emergente se puede hacer con CSS, lo que ya está haciendo al usar unidades de ventana gráfica relativas para ancho y alto.
En una nota al margen, no establecería tanto el ancho como el alto para el envoltorio y el elemento de contenido, sino que simplemente aplicaría el relleno al elemento principal.
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>