zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Transition timing-function wird auf dem "Rückweg" ignoriert

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2015, 10:06
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard 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?
__________________
... Meine Meinung
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2015, 11:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.

Geändert von MrMurphy (04.04.2015 um 12:40 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2015, 14:46
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:08 Uhr.