css transition initial value
- by nizzle
I would like to animate a div from right to left.
I cannot use a stylesheet because I don't know the amount of px.
If I set the initial value (where the animation starts from) and the end-value in the same function, it doesn't work.
//DOES NOT WORK
$("#hi").css({"width" : "200px", "transform" : "translateX(500px)"});
$("#hi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});
//WORKS
$("#alsohi").css({"width" : "200px", "transform" : "translateX(500px)"});
setTimeout(function(){
$("#alsohi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});
}, 50);
as you can see in this fiddle: http://jsfiddle.net/c66Fb/
what is a better solution to this than using a timeout?
