Ergebnis 1 bis 7 von 7

Thema: CSS Frage zu Animationen

  1. #1
    Contao-Nutzer
    Registriert seit
    22.08.2012.
    Beiträge
    81

    Standard CSS Frage zu Animationen

    Liebes Forum,

    ich verzweifle hier nun fast an einer CSS Frage:

    Mein Menü soll sich von links nach rechts schieben, wenn die Checkbox aktiv ist.

    Hierzu habe ich folgendes gemacht:

    .mod_navigation {
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    nav:has(:checked) .mod_navigation {
    transform: none;
    }

    Hier der Link zu meiner Testumgebung:
    https://2024.das-edelweiss-graen.at/

    Hat jemand einen Rat, was ich falsch gemacht habe?

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du solltest https korrekt einrichten. Ich bekomme im Firefox eine Sicherheitswarnung.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer
    Registriert seit
    22.08.2012.
    Beiträge
    81

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Du solltest https korrekt einrichten. Ich bekomme im Firefox eine Sicherheitswarnung.
    Ja, es ist aktuell überhaupt kein https eingerichtet, die Seite muss ohne aufgerufen werden

  4. #4
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Potti2012 Beitrag anzeigen
    Hat jemand einen Rat, was ich falsch gemacht habe?
    https://www.w3.org/TR/css-display-3/...lay-properties

    display properties lassen sich nicht animieren, schaue deinen CSS-Code mal genauer an

    Zitat Zitat von Potti2012 Beitrag anzeigen
    Ja, es ist aktuell überhaupt kein https eingerichtet, die Seite muss ohne aufgerufen werden
    Bin ich immer sehr vorsichtig mit, will ja verschlüsselte und nicht unverschlüsselte Verbindung im Internet.
    Habe auch browserstack genutzt um nachzuschauen, da ich dem Braten hier sonst auch nicht trauen würde .

  5. #5
    Contao-Nutzer
    Registriert seit
    22.08.2012.
    Beiträge
    81

    Standard

    Zitat Zitat von zoglo Beitrag anzeigen
    https://www.w3.org/TR/css-display-3/...lay-properties

    display properties lassen sich nicht animieren, schaue deinen CSS-Code mal genauer an



    Bin ich immer sehr vorsichtig mit, will ja verschlüsselte und nicht unverschlüsselte Verbindung im Internet.
    Habe auch browserstack genutzt um nachzuschauen, da ich dem Braten hier sonst auch nicht trauen würde .
    @zoglo: erstmal vielen Dank für deine Mühe, ich schaue mir den Code leider seit Stunden an und komme nicht drauf …
    Wenn ich in den devTools den haken bei

    @media only screen and (min-width: 992px)
    nav:has(:checked) .mod_navigation {
    transform: none;
    }

    entferne, dann sehe ich genau das gewünschte Verhalten.

  6. #6
    Contao-Nutzer
    Registriert seit
    22.08.2012.
    Beiträge
    81

    Standard

    Zitat Zitat von Potti2012 Beitrag anzeigen
    @zoglo: erstmal vielen Dank für deine Mühe, ich schaue mir den Code leider seit Stunden an und komme nicht drauf …
    Wenn ich in den devTools den haken bei

    @media only screen and (min-width: 992px)
    nav:has(:checked) .mod_navigation {
    transform: none;
    }

    entferne, dann sehe ich genau das gewünschte Verhalten.
    @ZOGLO:


    DANKE - hab es gefunden!!!!!!!

  7. #7
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Potti2012 Beitrag anzeigen
    DANKE - hab es gefunden!!!!!!!
    Für die Nachwelt:

    Display properties lassen sich nicht animieren.
    Über einen not-selector und :checked war mod_navigation auf display: none gesetzt - display:flex hat erst danach gegriffen.

    Wollte hier dem TE den Denkanstoß geben, den Fehler macht man dann nie wieder
    Geändert von zoglo (04.02.2024 um 15:24 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •