✔ Kleines Problem mit CSS-Transition.

[Jan-Frederik Stieler]

Hi,
ich hab bei einem Menü einen Zeitversatz im Einblenden des Submenüs über css-transitions eingebaut
http://jsbin.com/nacaxu/7/edit
Wenn man jedoch schnell hintereinander über das erste Level mit der Maus fährt dann wird die Zeitverzögerung ignoriert.
Weiß jemand woran das liegt?

Viele Grüße

 

[SpiceLab]

Trifft zu, wenn man die .5s unterbietet. Fazit: diese Zeitverzögerung runterschrauben

 

[Jan-Frederik Stieler]

Aha wußte ich nicht. Danke!

 

[Jan-Frederik Stieler]

Mmh, das hilft nur nicht viel .
Die Zeitverzögerung ist trotzdem nur beim ersten Berühren vorhanden und dann nicht mehr.
Sollte ich das vielleicht doch lieber mit Javascript machen?

 

[SpiceLab]

Wenn du die Befürchtung hast, dass jeder Seitenbesucher solch ein "nervöses" Mausverhalten an den Tag legt...

 

[Jan-Frederik Stieler]

Hey,
also bei mir wird die Transition wirklich nur beim ersten mal ausgeführt. Wenn ich das menü verlasse und etwas warte habe ich keine Zeitverzögerung im Aufgehen des Untermenüs oder wenn ich ein anderes Untermenü aufmache. manchmal habe ich die Zeitverzögerung drinnen aber meistens nicht oder eben nur beim ersten drüberfahren.
Also das Problem besteht nicht nur wenn ich ganz schnell drüberfahre.
Ich habe jetzt mit Transitions nicht die meiste Erfahrung.

Grüße

 

[SpiceLab]

/*********** HAUPTMENUE: EBENE 2 (horizontal) ***********/
.menu-e1 .firstlvl .nav-child {
  position: absolute;
  left: auto; /* anstelle von -999em */
  width: auto;
  min-width: 16.66666666%;
  z-index: 1;
  visibility: hidden;
  transition: visibility 0s linear .2s; /* anstelle von visibility .2s linear .5s */
  -webkit-transition: visibility 0s linear .2s; /* anstelle von visibility .2s linear .5s */
  -moz-transition: visibility 0s linear .2s; /* anstelle von visibility .2s linear .5s */
  -o-transition: visibility 0s linear .2s; /* anstelle von visibility .2s linear .5s */
  background: rgba(255, 255, 255, 0.8);
}
.menu-e1 .firstlvl:hover .nav-child,
.menu-e1 .firstlvl > a:hover .nav-child {
   /*left: auto;*/ /* auskommentiert */
  visibility: visible; /* anstelle von left:auto */
}

http://jsfiddle.net/spicelab/nygyfLp9/ (besitzt nun auch die Zeitverzögerung beim Verlassen der Untermenüs)

 

[Jan-Frederik Stieler]

Hi,
danke, nur das ist nicht das Problem.
Mein Problem ist wirklich das ich min. beim zweiten Hover keine Zeitverzögerung ahbe.
Entweder ist das ein Problem hier aufm Mac oder es liegt irgendwie am Aufbau des Menüs.
Weil andere Beispiel mit einer Verzögerung funktionieren einwandfrei.
Zum testen habe ich mal eine sehr lange Zeitverzögerung eingebaut. Auch hier geht das Menü beim zweiten mal Hover direkt auf ohne Verzögerung.

Grüße

 

[SpiceLab]

(besitzt nun auch die Zeitverzögerung beim Verlassen der Untermenüs)

danke, nur das ist nicht das Problem.

War auch nicht als mißverstandene Lösung des Problems zu verstehen, sondern nur eine Randbemerkung

Mein Problem ist wirklich das ich min. beim zweiten Hover keine Zeitverzögerung ahbe.

Mein jsfiddle-Demo besitzt immerzu die Zeitverzögerung, auch nach dem vierten und fünften Überfahren des Hauptmenüpunktes.

Deutlicher wird das bei linear 2s: http://jsfiddle.net/spicelab/t13jty4o/

Der Knackpunkt in deinem CSS, der auch auf mein Win7-System zutrifft, ist der Umstand, dass visibility zeitverzögert werden soll, aber mit :hover die linke Startposition, und nicht visibility:visible geregelt wird - siehe hierzu all meine kommentierten Änderungen

Edit: Hier hab ich noch zwei Links zum Vergleich, die sich auch mit dieser Thematik beschäftigen:

1. CSS3 transitions using visibility and delay
2. Workarounds making CSS Transition Visibility Work Gradually

[edit]Tipp-Ex[/edit]​

 

[SpiceLab]

Möchte nach einer Woche ohne Feedback nur mal nachhaken

Hat sich das transition-Problem damit bei dir gelöst? Oder ruht seither das Projekt, weil du auf anderen Baustellen tätig bist?

[edit]Tipp-Ex[/edit]​