I have build a popup for my React app and I do not want to use any external library.
Now I am trying to use transition and transform with scale and then calculate the popup width and height and center it on the screen.
The problem is, I can't make calculations before the scale is done, and that cause that the popup shows in one place after the scale operation and then gets back in the center.
The popup width and height depend on the screen size and content so can't make it with CSS or so I think.
Here is the problem below:
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>Why not simply center it from start using translate.
The size of your popup can be made with CSS, which you are already doing by using relative viewport units for width and height.
On a side note, I wouldn't set both width and height for the wrapper and the content element, but simply apply padding to the parent element.
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>