1

I have a simple code with CSS3 translate() which should be triggered by Javascript. But it does not animate the translation it immediately jumps to the position. If I use css :hover it works as expected. But not with JS. What am I doing wrong? Here is JSFiddle example https://jsfiddle.net/umkrt5b1/ Here is the code:

<style>
    #test {
        transition: transform 1000ms linear;
        background-color: green;
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

<div id="test"></div>

<script>

    document.getElementById('test').style.transform = 'translateX(200px)';

</script>
Čamo
  • 3,863
  • 13
  • 62
  • 114
  • That's a bit browser dependent if they'd have made a recalc before executing that script or not, for instance current FF does, Chrome doesn't. Better play safe and [trigger it yourself.](https://jsfiddle.net/9fkz7t2g/) I don't think specs ask them to do so. – Kaiido Jul 01 '20 at 08:33
  • Why did you close this question? I don't see any relation. Also if I ask something I want to ask for pure issue in programming pattern not for "I have a large game project that used extensive jquery in its code. Some time ago I stripped out all" Who want to read it? This is pure issue extracted from my code. Nobody is curious about my projects or ideas... – Čamo Jul 01 '20 at 09:13
  • Did you read the answer there and its links? Your *situation* is **exactly** the same as that one: the browser hasn't yet performed the recalc before you set the new transform value -> it doesn't see anything to transition from. – Kaiido Jul 01 '20 at 09:16
  • May be. But this is clean. Clean for Google clean for people. I hate garbage code. – Čamo Jul 01 '20 at 09:23

1 Answers1

1

Try to wrap it in requestAnimationFrame This callback function gets invoked before your browser is ready to repaint. This doesnt work in Edge below version 12 and internet explorer because the callback is invoked after repainting.

  window.requestAnimationFrame(function(){
     document.getElementById('test').style.transform = 'translateX(200px)';
  })

Other solution is with setTimeout()

setTimeout(()=> {
     document.getElementById('test').style.transform = 'translateX(200px)';
})
bill.gates
  • 14,145
  • 3
  • 19
  • 47
  • It works BUT it should work also without the RAF. – Čamo Jul 01 '20 at 08:17
  • @Čamo i have updated my answer – bill.gates Jul 01 '20 at 08:19
  • Yes it works as well. But why it does not work as it is? – Čamo Jul 01 '20 at 08:20
  • 1
    A single requestAnimationFrame and a 0 timeout won't necessarily ensure that it works. with the single rAF you'd be right **before** the next painting, with timeout 0 you could be somewhere between 0 to 16ms before. If the browser waits the next painting operation to do the recalc, you'd face the same issue as if it was called synchronously. To be safe you should wait a 0 timeout from rAF, but that's a bit useless since as shown in the dupe, all this can be done synchronously. – Kaiido Jul 01 '20 at 08:27
  • @Kaiido thank you for the explanation.i couldnt explain it because i dont know exactly how it works. i still need to learn how the event loop works with browser repainting – bill.gates Jul 01 '20 at 08:33
  • 1
    https://stackoverflow.com/questions/54344996/css-transition-doesnt-work-if-element-start-hidden/54348963#54348963 – Kaiido Jul 01 '20 at 08:34
  • What about document.ready? This does not solve the probelm? Cause element.offsetTop is not clean. – Čamo Jul 01 '20 at 10:06