Problema con addEventListener!

[Alexis88]

En ese caso, puedes darle inicialmente una posición cero, retardas unas milésimas de segundo la siguiente acción y luego haces bajar la bolita 100px.

Código Javascript:

var caja1 = document.getElementById("caja1"),
    caja2 = document.getElementById("caja2"),
    bola  = document.getElementById("bola");
 
function moverBola()
{
    bola.style.WebkitTransform = "translateY(0px)";
    setTimeout(function(){
        bola.style.WebkitTransform = "translateY(100px)";
    }, 100);
}
  
caja1.addEventListener("click", moverBola, false);
caja2.addEventListener("click", moverBola, false);
 

Y con esto, ya no son necesarios los pseudo-atributos, por lo que puedes eliminar data-translate de la bolita. Con setTimeout, ejecuto la bajada de la bolita luego de 100 milésimas de segundo después de que la haya dejado en su posición inicial. Puedes modificar el tiempo de retardo a tu gusto.

Así se ve: http://jsbin.com/ItAGAgU/3

Saludis