|
|||
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> * 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?
__________________
... Meine Meinung |
Sponsored Links |
|
|||
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:
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. Geändert von MrMurphy (04.04.2015 um 12:40 Uhr) |
Sponsored Links |
|
|||
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.
__________________
... Meine Meinung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Menueleiste anpassen | Mulo | CSS | 1 | 04.02.2015 11:08 |
Norwegische Webmaster gegen veraltete Browser | Schelm.isch | Offtopic | 255 | 23.04.2009 22:27 |
Layoutcheck von einer Beispielseite | wave | Site- und Layoutcheck | 1 | 12.11.2008 22:48 |
Browserneurose | SimonWpt | CSS | 39 | 15.07.2005 11:51 |
Scrollbares Textfeld mit purem CSS | Dancer | CSS | 6 | 24.01.2005 16:58 |