Einen schönen Ostermontag! Ich habe mal eine Demo mit scale gemacht. War eine Sache von Minuten, jetzt wo ich weiß, wie es sein soll. Man muss:
Nein, da habe ich leider keine Idee. Wenn das Div am Anfang ein display:none hat, funktioniert die Animation nicht, aus den Gründen, die bei Stackoverflow beschrieben werden. Und das display ist nicht animierbar.
So, jetzt ist es spät genug für mich, gute Nacht!
Ja, so ungefähr. Aber das hatten wir ja vorhin schon einmal.
Das Problem ist, dass das Bild von der linken oberen Ecke eingeblendet wird und nicht aus der Mitte heraus.
Bei mir nicht, es wird von links und der Mitte (vertikal) eingeblendet. Was für einen Browser benutzt Du? Unterstützt diese vielleicht kein Flex?
Sieh dir dies an, das müsste sein, was Du dir vorstellst:
Das Menü soll sich ja verschieben. Wenn das Logo nicht eingeblendet ist, dann soll das Menü ganz normal positioniert sein. Wenn das Logo eingeblendet ist, dann soll sich das Menü nach rechts verschieben.
Ich denke, das verstehe ich jetzt. Nur wenn ich es richtig verstehe, sind wir dann genau da wo wir mit animierter Höhe und Breite und vertikaler Zentrierung waren. Moment, ich mache ein Fiddle ...
Ja, lass wissen, ob Du so zum Ziel gekommen bist.
Wenn Du möchtest nehme ich Dir das ganze einmal auf.
Ein Video? Das wäre optimal.
Ich habe selber mal eine Demo gemacht aus meiner Testseite:
https://jsfiddle.net/Sempervivum/zg4kqx7e/1/
Da verschiebt sich nichts.
Das Logo wird ja erst beim Scrollen ab einem bestimmten Punkt auf der Seite angezeigt. Wenn das Logo eingeblendet wird, verschiebt sich das Navigationsmenü nach rechts und dann taucht das Logo auf.
Genau das verstehe ich nicht: Weil bei Skalierung sich die Größe des div nicht ändert, dürfte sich doch nichts verschieben?
Wäre es eine Möglichkeit, dass Du eine Demo ohne Inhalte mit irgend welchen Blindtexten machst und diese online stellst?
Ich verstehe nicht, was Du mit dem Ausblenden durch display: none; erreichen willst. Anscheinend gibt es ja da ohne das einen störenden Effekt, den Du beseitigen willst.
Hast Du die Möglichkeit, das ganze online zu stellen, damit man es sich ansehen kann?
Das wird hier diskutiert:
https://stackoverflow.com/questions/2210…isplay-property
display:none;removes a block from the page as if it were never there.
deshalb funktioniert die Animation nicht. Als Lösung wird angeboten, statt dessen die opacity zu animieren, das können wir ja noch schnell ausprobieren:
/* Klasse des eigentlichen Bildes .upperlogo ist der div */
.logocool {
margin-top: 6px;
height: 55px;
width: 57px;
transition: transform 0.7s, opacity 0.7s;
/* Bild zunaechst unsichtbar machen */
transform: scale(0, 0);
opacity: 0;
}
#upperlogo.visi {
/* jetzt das Bild sichtbar machen */
transform: scale(1, 1);
opacity: 1;
}Testdatei fertig, ich sehe, was das Problem ist, aber nicht die Lösung. Ich überlege ...
D. h. nachdem wir die Änderung mit dem Ausblenden des Div gemacht haben funktioniert funktioniert das animierte Wachsen der Größe von 0 an nicht mehr?
Ich mache mal eine Testdatei dafür ...
allerdings funktioniert der CSS-Effekt nicht.
Das verstehe ich jetzt nicht, Du schreibst doch, dass die Javascript-Animation funktiert? Welchen CSS-Effekt meinst Du hier?
Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment.
Das ist natürlich ein Grund und dann ist es auch angebracht.
möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen?
Wenn ich das richtig verstehe, hast Du das Div ja als Javascript-Objekt und dann kannst Du das neue auch dort einfügen. In etwa so:
let newDiv = document.createElement('div');
if(categoryBox.hasOwnProperty(elem)) {
newDiv.id = elem;
newDiv.classList.add('min-row');
}
let newDiv2 =document.createElement('div');
// dieses div erweitern mit class, id etc.
// und dem ersten Div hinzu fügen:
newDiv.appendChild(newDiv2);
console.log(categoryBox[elem]);
htmlFragment.appendChild(newDiv);Das wäre kein Problem, Du müsstest im CSS nur das display auf none setzen und beim Scrollen wieder auf block oder flex:
/* Klasse des eigentlichen Bildes .upperlogo ist der div */
.logocool {
margin-top: 6px;
height: 55px;
width: 57px;
transition: width 0.7s, height 0.7s;
/* Bild zunaechst unsichtbar machen */
width: 0;
height: 0;
display: none;
}
.logocool img {
width: 100%;
height: 100%;
}
#upperlogo.visi {
/* jetzt das Bild sichtbar machen */
width: 55px;
height: 57px;
display: flex;
}Ich fürchte nur, dass es dann einen unangenehmen Sprung gibt, aber sieh es dir erst Mal an.
Ja, dann wäre das Logo von Anfang an etwas nach rechts versetzt und würde sich vom Zentrum aus ausdehnen.
Wenn ich mir deinen Screenshot oben ansehe, dann ist das Logo ja sicher in einem Container mit den Menüpunkten. Diesem könntest Du display: flex; zuweisen und dann das Logo zentrieren mit align-self: center; für den Container des Logos mit der Klasse "logocool".
Finde ich nicht pingelig. Möchtest Du, dass es nur vertikal mittig ist? Denn sonst wären wären wir wieder bei dem Effekt, den wir mit scale hatten.
Da fehlen uns jetzt noch zwei Dinge:
Das Logo muss sich in der Größe an das Div anpassen und wir müssen width und height animieren:
/* Klasse des eigentlichen Bildes .upperlogo ist der div */
.logocool {
margin-top: 6px;
height: 55px;
width: 57px;
transition: width 0.7s, height 0.7s;
/* Bild zunaechst unsichtbar machen */
width: 0;
height: 0;
}
.logocool img {
width: 100%;
height: 100%;
}
#upperlogo.visi {
/* jetzt das Bild sichtbar machen */
width: 50px;
height: 50px;
}