"cannot dynamically set initial element translation before transition in same call stack" Code Answer


because of the computation costs associated with each reflow, most browsers optimize the reflow process by queuing changes and performing them in batches. in this case, you are overwriting the inline style information of the elements, which the browser recognizes. the browser queues the first change and then the second before finally deciding that a reflow should occur, which it does all-at-once. (it doesn't matter that you have separated the changes into two function calls.) this would similarly happen when trying to update any other style property.

you can always force the browser to reflow by using any of the following:

  • offsettop, offsetleft, offsetwidth, offsetheight
  • scrolltop, scrollleft, scrollwidth, scrollheight
  • clienttop, clientleft, clientwidth, clientheight
  • getcomputedstyle() (currentstyle in ie)

so just change your first function to this:

var computedstyles = [];

function setanimation() {
    div1.style.webkittransform = 'matrix(1,0,0,1,1200,0)';
    div2.style.webkittransform = 'matrix(1,0,0,1,0,0)';

    // force div's 1 and 2 to reflow
    computedstyles[div1] = div1.clientheight;
    computedstyles[div2] = div2.clientheight;

and now the browser will perform the initial transformations. you don't need two functions to accomplish this, just force the reflow in-between.

due to some headaches that can occur when trying to solve reflow/repaint issues like this, i always suggest using css animations, even if you have to dynamically create and remove style rules from a stylesheet using the cssom. read more here: programmatically changing webkit-transformation values in animation rules

By user3747518 on April 28 2022

Answers related to “cannot dynamically set initial element translation before transition in same call stack”

Only authorized users can answer the Search term. Please sign in first, or register a free account.