Rolf B: jQuery code zeigt manchmal verschiedene Große in Chrome

Beitrag lesen

Hallo liebewinter,

so, ich habe doch noch mal Zeit investiert. Guck dir mal dieses Fiddle an:

https://jsfiddle.net/Rolf_b/agoy7kfs/1/

Was sind die Besonderheiten?

  • Der Popup-Hintergrund ist display:fixed mit top:0; left:0; width: 100%; height: 100%; und passt sich damit automatisch an den Bildschirm an.
  • Das Popup ist ein Child-Element des Hintergrunds. Dadurch kann man es ganz einfach mit display: flex; justify-content:center; align-items:center zentrieren und muss überhaupt nicht mehr rechnen
  • Einblenden und Ausblenden des Popup erfolgt rein mit CSS, über die animation Eigenschaft. Die Animation wird über Klassen visible und hidden ausgelöst.
    • ABER: Das ist nicht ganz einfach. Eine Animation lässt sich nicht so einfach wiederholen. Darum findest Du diesen Code im JavaScript:
    let content = document.getElementById("layerPreview-3");
    content.className = "";
    let dummy = content.offsetWidth;
    content.className = "visible";
    • Das Lesen von offsetWidth führt dazu, dass der Browser einen so genannten "reflow" durchführt. Und damit merkt er, dass die Animation entfernt wurde. Wird danach die Klasse gesetzt, wird die Animation neu ausgeführt. Das musste ich auch erstmal googeln.

Das Popup funktioniert dann so:

<div id="layerPreview-3">
   <div>
      <header>...</header>
      <div>...</div>
      <footer>...</footer>
   </div>
</div>
#layerPreview-3 {
  position:fixed;
  z-index:1;
  display:flex; justify-content: center; align-items: center;
  top: 0px; left:0px; width:100%; height:0; overflow:hidden;
	background-color: rgba(50, 50, 50, 0.5);
}

#layerPreview-3 > div { 
  background-color: #dedee0;
	width: 50%; min-width: 30em;
	height: 21rem;
  display: flex; flex-direction: column; 
}


#layerPreview-3.visible { 
   animation: showLayer 0.6s linear forwards;
}
#layerPreview-3.visible > div {
  animation: showLayerContent 0.6s linear forwards;
}
#layerPreview-3.hidden > div {
  animation: showLayerContent 0.3s linear reverse forwards;
}
#layerPreview-3.hidden {
  animation: showLayer 0.3s linear reverse forwards;
}
@keyframes showLayer
{
  0% { height: 0vh;	background-color: rgba(50, 50, 50, 0); }
  1% { height: 100vh;	background-color: rgba(50, 50, 50, 0.5); }
  100% { height: 100vh; background-color: rgba(50, 50, 50, 0.5); }
}
@keyframes showLayerContent
{
  0% { transform: translate(0, -11em) scale(0); opacity: 0; }
  100% { transform: translate(0, 0) scale(1) ; opacity: 1; }
}

In #layerPreview-3 > div ist das > ganz wichtig. Sonst gilt die Regel für alle div im Popup.

Für #layerPreview-3 und für das div darin werden Animationen geschaltet. Setzt man die visible Klasse, werden die showLayer und showLayerContent Keyframes vorwärts ausgeführt. Setzt man die hidden Klasse, werden sie rückwärts ausgeführt.

showLayer hat drei Stufen: 0% - alles unsichtbar, 1% - Hintergrund füllt den Bildschirm. Das bleibt so bis 100%. Das ist wichtig für das Ausblenden. Die Animationen dauern gleich lange. Das Popup wird klein gemacht, und wenn es ganz klein ist, verschwindet der Hintergrund.

showLayerContent verändert drei CSS Eigenschaften. translate, scale und opacity. Die Mischung von translate und scale bewirkt, dass das Popup sich genau so öffnet wie bei Dir mit jQuery. Und opacity macht es langsam sichtbar.

Das Popup habe ich mit Flexbox aufgeteilt, damit header, Inhalt und footer übereinander sind. Den Inhalt habe ich nochmal mit flexbox geteilt, in eine figure (Bild und Beschreibung) und ein aside (Warenkorb). In der figure ist das Bild und eine figcaption, auch wieder Flexbox. Das Bild musste ich in ein <div> setzen. Anders kann ich die Breite nicht kontrollieren. object-fit:cover sorgt dafür, dass das Bild so angezeigt wird, dass es die Box füllt und man möglichst viel vom Bild sieht.

Ob man dafür auch grid nehmen kann weiß ich nicht.

Im Footer habe ich mit Flexbox dafür gesorgt, dass die Buttons richtig angeordnet sind.

Guck es Dir einfach mal an.

Rolf

--
sumpsi - posui - obstruxi