XHTMLforum - Transition timing-function wird auf dem "Rückweg" ignoriert

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Transition timing-function wird auf dem "Rückweg" ignoriert (http://xhtmlforum.de/showthread.php?t=71895)

Transition timing-function wird auf dem "Rückweg" ignoriert

Hallihallo an diesen sehr sonnigen Samstag Morgen,

ich spiele gerade mit Transitions herum und habe hier mal einen Testballon in Form eines zweistufigen Flyout-Menüs gebaut:

HTML-Code:

<!DOCTYPE html>

<html>

        <head>

                <style type="text/css">

                        #menu {

                                margin-top: -100px;

                                transition: margin 1s ease;

                                width: 100px;

                                white-space: nowrap;

                        }

                        #menu:hover {

                                margin-top: 0;

                        }

                        #menu > li {

                                position: relative;

                        }

                        #menu ul {

                                width: 0;

                                height: 0;

                                overflow: hidden;

                                position: absolute;

                                top: 0;

                                left: 100%;

                                transition: width 1s ease;

                        }

                        #menu li.nested:hover ul {

                                width: 100px;

                                height: auto;

                        }

                </style>

        </head>

        <body>

                <ul id="menu">

                        <li>Eintrag 1</li>

                        <li>Eintrag 2</li>

                        <li class="nested">

                                Eintrag 3

                                <ul>

                                        <li>Eintrag 2.1</li>

                                        <li>Eintrag 2.2</li>

                                        <li>Eintrag 2.3</li>

                                </ul>

                        </li>

                        <li>Eintrag 4</li>

                        <li>Eintrag 5</li>

                        <li>Eintrag 6</li>

                        <li>Eintrag 7</li>

                </ul>

        </body>

</html>

Es funktioniert auch alles beinahe so, wie es soll:
* Beim Hovern der obersten Ebene fährt das Menü innerhalb der Duration herunter, beim Verlassen fährt es innerhalb der Duration wieder hoch.
* Das verschachtelte UL in Eintrag 3 fährt bei Hover innerhalb der Duration aus, aber: Beim Verlassen von Eintrag 3 fährt es _sofort_ ein.

Mache ich da was falsch, oder ist das einfach der "Komplexität" geschuldet?

Hallo

die Ursache ist einfach zu erklären. Bei den Auswirkungen wird es schon schwieriger, da sie etwas komplexes Denken verlangen.

Die Ursache ist schlicht das transition nicht mit allen CSS-Anweisungen zusammenarbeitet, also keine Auswirkungen auf sie hat. Das ist zum Beispiel bei display: none oder display: block oder bei height der Fall.

Das ist kein Browser-Bug, sondern wohl so gewollt. Aus welchen Gründen auch immer.

In deinem Fall hast du height nicht mal in die transition eingebunden, das Ergebnis ist aber das gleiche.

Ich habe leider noch keine Auflistung gefunden, welche CSS-Anweisungen auf transition reagieren und welche nicht.

Die Auswirkungen bei dir sind folgende:

Zitat:

Beim Hovern werden zwei CSS-Anweisungen durchgeführt, eigentlich parallel, aber durch transition über unterschiedliche Zeiträume:

1. height

Geschieht ohne Verzögerung. Du hast es ja auch nicht in transition eingeschlossen. Damit ist der Platz für die Sichtbarkeit geschaffen.

2. width

Geschieht mit Verzögerung und ist sichtbar, da height bereits ausgeführt wurde.

Beim Enthovern das gleiche:

1. height

Geschieht ohne Verzögerung, das innere ul ist schlagartig nicht mehr sichtbar

2. width

Geschieht mit Verzögerung, funktioniert auch, ist bloß nicht sichtbar, da height bereits schlagartig gegriffen hat und das innere ul bereits ausgeblendet ist

Die Transition timing-function wird auf dem "Rückweg" also nicht ignoriert, sondern ist nur optisch nicht sichtbar.

Das ist bei Problemen mit transition ein Grundproblem: Man muss zunächst herausbekommen, ob transition überhaupt nicht funktioniert oder, wie in deinem Fall, zwar funktioniert, die Auswirkungen durch Überlagerungen aber optisch nicht sichtbar sind.

Da beide Anweisungen parallel starten spielt die Reihenfolge im CSS-Quelltext keine Rolle.

Und wie schon geschrieben kann meiner Kenntnis nach auf height auch nicht mit mit transition eingewirkt werden.

Sachlich ist dein Quelltext also ok.

Gruss

MrMurphy

Edith: Du kannst die Problematik teilweise sichtbar machen, wenn du dem hover-Teil eine kräftige Hintergrundfarbe verpasst und die transition-Zeit auf 10 Sekunden änderst. Beim Enthovern wird das ul schlagartig ausgeblendet, wenn du innerhalb von 10 Sekunden wieder hoverst, beginnt width nicht am Anfang, sondern dort, bis wo es sich bis dahin zurückbewegt hat.

Stimmt, ich habe nicht bedacht, dass die Height ja sofort auf 0 gesetzt wird. Danke für den Denkanstoß :)

Height geht übrigens auch, aber transition mit Distanzen funktioniert immer nur mit absoluten Werten.