Javascript-Einblendung mit CSS-Transition verbinden

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

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

    Vielen Dank, ich denke, das ist ausreichend. Dankeschön für die Hilfe.


    Die Alternative wäre wieder mit scale, oder?

  • Das wäre kein Problem, Du müsstest im CSS nur das display auf none setzen und beim Scrollen wieder auf block oder flex:

    Ich fürchte nur, dass es dann einen unangenehmen Sprung gibt, aber sieh es dir erst Mal an.

  • Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht. :P

  • Zitat

    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?

  • Entschuldige bitte für die Verwirrung.

    Wir haben ja vorhin das mit dem vertikal mittig probiert. Jetzt wollte ich das mit dem scale auch einmal testen.

    Dazu habe ich obigen CSS Code erstellt.


    Der Scale-Effekt hat so lange funktioniert, bis ich den Div ausblenden wollte, wenn kein Scroll erfolgt.

    Nun ist allerdings folgendes:

    Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht.

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

  • Das wird hier diskutiert:

    https://stackoverflow.com/ques…ork-with-display-property

    Zitat

    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:

  • An sich funktioniert das auch mit Opacity. Wenn ich aber den Div vorher wieder ausblende, geht auch hier der Effekt nicht mehr.


  • 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?

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

    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.

    Mit dem Display none wollte ich erreichen, dass der Div Container, also der freie Platz, der im Menü angezeigt wird, obwohl das Scroll-Event noch nicht gestartet wurde und das Bild daher noch unsichtbar ist, ausgeblendet wird, da dieser stört.


    Hast Du die Möglichkeit, das ganze online zu stellen, damit man es sich ansehen kann?

    Das würde ich sehr gerne machen, allerdings darf ich das Projekt nicht veröffentlichen. Ich weiß, das ist blöd und könnte uns einiges ersparen. :|

  • Zitat

    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?

  • 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?

    Online stellen ohne Inhalte ist leider schwierig, weil es sich dabei um ein WoltLab-Forum handelt.

    Wenn Du möchtest nehme ich Dir das ganze einmal auf.