nicht angemeldet
CSS 3 Transition Problem
Hallo Leute,
Habe ein kleines Programm geschrieben. Wäre nett wenn ihr euch das anschauen würdets, um mir vll später bei meinem Problem helfen zu können.
Hier der Link: TransitionProgramm
Ich will ein Div per Css-Transition von einer Ausgangsposition um Top: xy px verschieben. Dabei wird das ganze eigentlich immer nur mit Pseudoklassen im Internet realisiert. Für mein eigentliches Programm, würde ich aber am liebsten das DIV an einer zuvor mit JS berechneten random-Position erscheinen lassen und dann in eine bestimmte Richtung eben per Transition "gleiten" zu lassen.
Beim Programm oben, habe ich es per Onclick realisiert.
Ein Problem bei meiner Ausführung ist dann, dass eine CSS definierte Klasse und ein per JavaScript hinzugefügter Style z.B. TestDiv.style.top = xy +"px";
unterschiedliches sind. Vll kann mir dazu schon jemand was erklären.
Sonst könnte ich im Prinzip einfach per JavaScript wenn ich die Bewegung ausführen will einen Wert hinzufügen, das wäre optimal, so ist es aber nicht gg.
Gibt es noch eine andere Möglichkeit, wie ich dynamisch später einen Start und Endpunkt für die Transition festlegen kann. Oder muss ich im vorhinein schon Klassen definieren und diese dann wie in meinem Programm zwueisen? Da würde ich dann dass mit der Random-Position vergessen können.
Danke schonmal,
LG Mike
-
Ein Problem bei meiner Ausführung ist dann, dass eine CSS definierte Klasse und ein per JavaScript hinzugefügter Style z.B. TestDiv.style.top = xy +"px"; unterschiedliches sind. Vll kann mir dazu schon jemand was erklären.
Eine CSS-Transition wird getriggert, sobald der Wert, für den du die Transition definiert hast, sich ändert. In deinem Fall also "top".
Ob dieser Wert sich nun ändert, weil du dynamisch eine Klasse hinzufügst, oder den Wert direkt über das DOM veränderst spielt dabei keine Rolle.Sonst könnte ich im Prinzip einfach per JavaScript wenn ich die Bewegung ausführen will einen Wert hinzufügen, das wäre optimal, so ist es aber nicht gg.
Du meinst ungefähr so?
http://jsfiddle.net/CJ3ed/3/Am schönsten wäre es, Javascript und CSS gänzlich voneinander zu trennen, aber das ist momentan für deinen Fall noch Zukunftsmusik.
http://jsfiddle.net/CJ3ed/4/
-
Du meinst ungefähr so?
http://jsfiddle.net/CJ3ed/3/Sehr geil, keine Ahnung warum das am Anfang bei mir nicht funktioniert hat. Anschließend bin ich dann komplett auf den komplizierten Weg geraten. Genau nachdem habe ich gesucht. Funktioniert einwandfrei. Danke !:)
Am schönsten wäre es, Javascript und CSS gänzlich voneinander zu trennen, aber das ist momentan für deinen Fall noch Zukunftsmusik.
http://jsfiddle.net/CJ3ed/4/
Das Beispiel funktioniert bei mir nicht, oder meintest du deswegen Zukunftsmusik, weil die Transitions eben so noch nicht anwendbar sind?
LG Mike
-
Das Beispiel funktioniert bei mir nicht, oder meintest du deswegen Zukunftsmusik, weil die Transitions eben so noch nicht anwendbar sind?
Das Beispiel funktioniert zum einen nicht, weil ich im Javascript
attrstattsetAttributegeschrieben habe, Zum anderen unterstützt kein mir bekannter Browser die CSS-Funktionattr()vollständig. Zukunftsmusik bezog sich auf letzteres ;)
-
-