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/