Javascript-Einblendung mit CSS-Transition verbinden

Zitat von Sempervivum

Da verschiebt sich nichts.

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 habe jetzt mal ein Video gemacht.

Zu sehen ist, dass die Animation an sich funktioniert. Wenn man aber den Div, also den störenden freien Platz ausblendet, dann funktioniert die Animation nicht mehr.

Nicht wundern, wenn das alles ein wenig komisch aussieht, ich habe so gut wie alle Inhalte entfernt.

Video entfernt.

Zitat von Sempervivum

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 ...

Okay, dann habe ich das wahrscheinlich einfach falsch erklärt. Entschuldige bitte.

Zitat von Sempervivum

Sieh dir dies an, das müsste sein, was Du dir vorstellst:

https://jsfiddle.net/Sempervivum/6jtr2vw7/2/

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.

Du hattest mir dann vorhin zwei Möglichkeiten genannt. Die 1. hat an sich funktioniert, jedoch wollte ich einfach zum Lernen und aus Schönheitsgründen die 2. nochmal ausprobieren, mit Opacity bzw. Scale zu arbeiten. Aber wenn ich eine Opacity bzw. Scale einbaue, ist das Menü dauerhaft nach recht verschoben, als wäre das Logo eingeblendet, ist es aber nicht. Wenn ich den Div dann ausblende, wie jetzt in deinem Code, dann funktioniert die Opacity-Animation nicht mehr.

Also, das mit dem aus der Mitte heraus einblenden funktioniert jetzt so weit, da hatte ich einen Fehler gemacht.

Trotzdem würde mich interessieren, wie ich einen Effekt mit Opacity machen kann, der Div aber nur eingeblendet wird, wenn auch das Logo eingeblendet wird.

Hast Du da eine Idee?

#upperlogo {
        display: none;
    }

    .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;
        }
     .logocool img {
         width: 100%;
         height: 100%;
    }
        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            display: flex;
            transform: scale(1, 1);
            opacity: 1;
        }

Zitat von Sempervivum

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.

Okay, dann belasse ich das bei der vorherigen Methode.

Zitat von Sempervivum

So, jetzt ist es spät genug für mich, gute Nacht!

Ich möchte mich aufrichtig für Deine Hilfe bedanken. Ich habe wenig Leute im Internet gesehen, die mir so ausführlich geholfen haben.

Vielen Dank und eine gute Nacht.

Zitat von Sempervivum

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:

• Das Bild an Stelle des Containers mit scale verkleinern
• Den Ursprung für die Transformation an die linke Kante legen
• Zusätzlich den Container in der Breite verkleinern, damit die Inhalte rechts der Animation folgen

https://jsfiddle.net/Sempervivum/s9a406gq/5/

Vielen herzlichen Dank, das funktioniert wunderbar.

Ebenfalls einen schönen Ostermontag!