Question

So, I can create an location animation of an element by doing something like this:

Widget.style.left = Dest.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";

This works fantastically so long as the widget already exists. The problem is when I create a new widget, and want to start it off screen, there doesn’t seem to be an obvious and elegant way to set the start location.

Predictably, if I try this:

Widget.style.left = Src.x;
Widget.style.left = Dest.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";

The source location is ignored seems to have no effect.

Answer 1

This is both a problem and a feature with CSS transitions. The browser only sees the “state” of an object that it can use for a transition when your javascript is done executing so only when that happens can the “initial” state of an object be set and likewise, only then can the final state of an object for transitions be seen by the browser. That means that:

Widget.style.left = Src.x;
Widget.style.left = Dest.x;

won’t do anything. If the object is brand new, the only state the browser will see (for the purposes of transitions is Dest.x and that will be treated as the initial state (thus no transition).

The only way I’ve found around it is to let my javascript finish and use a timer to kick off the transition:

// create Widget
Widget.style.left = Src.x;
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out";
// user a timer to get the current location marked as the starting location
// and then set the new location
setTimeout(function() {
    Widget.style.left = Dest.x;  // trigger transition from Src.x to Dest.x
}, 0);

I say this is both a feature and a problem because it has its benefits along with its problems. If you move an object around a couple times in the middle of one piece of javascript, the object won’t transition between all those intermediate locations, it will only transition to the final location. But, it does create problems like what you’re running into.

Edit: This post Cannot dynamically set initial element translation before transition in same call stack suggests that there is a work-around that forces a browser layout by accessing any one of a number of specific properties after you set the start position before you set the final position. I have not tried it myself.

This work-around seems to work here in Chrome: http://jsfiddle.net/jfriend00/VqTHV/