Comment centrer un div tout en utilisant la transition et transformer avec l'échelle
J'ai créé une fenêtre contextuelle pour mon application React et je ne souhaite utiliser aucune bibliothèque externe.
Maintenant, j'essaie d'utiliser transition and transform with scalepuis de calculer la largeur et la hauteur de la fenêtre contextuelle et de la centrer sur l'écran.
Le problème est que je ne peux pas faire de calculs avant que la mise à l'échelle ne soit terminée, et cela fait que la fenêtre contextuelle s'affiche à un endroit après l'opération de mise à l'échelle, puis revient au centre.
La largeur et la hauteur du popup dépendent de la taille de l'écran et du contenu, donc je ne peux pas le faire avec CSSou alors je pense.
Voici le problème ci-dessous.
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>Pourquoi ne pas simplement le centrer dès le début en utilisant translate. La taille de votre fenêtre contextuelle peut être définie avec CSS, ce que vous faites déjà en utilisant des unités de fenêtre relatives pour la largeur et la hauteur.
En passant, je ne définirais pas à la fois la largeur et la hauteur du wrapper et de l'élément de contenu, mais j'appliquerais simplement un rembourrage à l'élément parent.
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>