Observable

Understand the fundamental concepts & techniques for working with Observable notebooks.

Fundamentals

I really wish I had paid more attention to this parenthesis before spending an hour or more banging my head against the wall wondering why my HTML button view wasn't working 😩

Graham Snyder

The div doesn't seem to animate upon being clicked unless you wrap `element.style.transform = "inherit"` in a timeout. (At least, that's the behavior on my computer.) I assume this used to work correctly... did browser behavior regarding CSS transforms and/or transitions change since this was written?

Matt Diamond

Ignore the above comment re: wrapping inherit in a timeout... that will get you an animation if the timeout is large, but it's not the intended animation. I see now what the underlying problem is: the requestAnimationFrame callback occurs before the original transition takes effect. Interestingly, if I wrap the requestAnimationFrame call with another requestAnimationFrame call, then I get the expected behavior. It seems that the first requestAnimationFrame call takes place within the same render as the first transition, and calling requestAnimationFrame at that stage will allow you to ensure that the new transition is applied on the subsequent render, after the initial transition has taken effect.

Same issue, it works to me if I replace the raf with a timeout too
setTimeout(()=>{
        element.style.transition = "transform 250ms ease";
        element.style.transform = "inherit";
    })