nicht angemeldet
Hallo!
Ich habe ein für mich offenbar unüberwindbares Problem mit dem Management von CSS Animationen
via JavaScript. Ich muss gestehen, dass obwohl ich mit HTML und CSS recht gut klar komme, ich mit
JavaScript so meine Schwierigkeiten habe und ich hoffe, dass ihr mir hier weiterhelfen könnt!
Das Problem ist also folgendes:
Ich möchte, dass ein click auf ein DIV-Element zwei Folgen nach sich zieht, nämlich erstens,
dass die angeclickte DIV-Box zusammen mit zwei anderen Boxen verschwindet, und zweitens, dass dafür drei andere, gleichgroße DIV-Boxen deren Platz einnehmen.
Das ist mir grundsätzlich auch gelungen, aber leider nicht so, wie ich mir das erhofft hatte!
Denn nach meinen bisherigen Bemühungen habe ich nur die Qual der Wahl zwischen zwei Optionen:
1. Ich lasse die "ersten" drei Boxen mit display:none >abrupt< verschwinden, setze die "zweiten" drei Boxen auf display:inline und starte deren Animation, welche sie von außerhalb des
Browserfensters an ihren vorbestimmten Platz gleiten lässt (das klappt wunderbar) oder aber
2. ich setze die nach dem Laden der Seite bei 50% gestoppte Animation der "ersten" drei Boxen fort, die dafür sorgt, dass diese genauso geschmeidig wieder aus dem Browserfenster herausgleiten,
wie sie hineingekommen sind - allerdings um den Preis, dass das zweite Set Boxen nicht geladen
wird!
Mein Ziel ist es, dass ein click auf eine Box dazu führt, dass das erste 3-Boxen-Set seine pausierte Animation wieder aufnimmt, zu Ende führt und (mittels display:none) verschwindet, und erst danach das zweite Boxen-Set auf display:inline schaltet und seine Animation startet, die es
von außerhalb des Browserfensters an den entsprechenden Platz gleiten lässt.
Alle Versuche, die verschiedenen Funktionen mit onclick="#" oder EventListener, setTimeout oder mit was auch immer unter einen Hut zu bringen, sind kläglich gescheitert! Die einzige Lösung, die ich sehe ist, mit <div id="box1" onclick="#()"> <script>funktion #() {...style.animationPlayState = "running"></script> die Animation (iteration = 1) der ersten drei Boxen weiterlaufen zu lassen, und alle weiteren für den Vorgang nötigen Funktionen vom "Erfolg" dieser Operation abhängig zu machen, und eben nicht von dem "click" auf das div-Element ansich!
Fraglich ist halt, wie ich das umsetzen kann. Habe von JavaScript echt kaum Ahnung, aber ich
dachte da an sowas wie if (Animation der ersten div-Boxen ist zu Ende oder bei 99%) {box1,2,3 display: none / box4,5,6 display:inline, box4,5,6 animationPlayState="running" usw...), aber
ich habe keine Ahnung, wie ich als Variable (Bedingung) das Ende des entsprechenden Animationsvorgangs bestimmen kann. Habe schon einiges Versucht, aber das hat alles nicht funktioniert.
Wenn jemand eine Idee hat, wie ich dieses Problem lösen kann, sei ihm (oder ihr) mein Dank sicher!
Gruß,
Roadster.
Gunnar Bittersmann