Easing/Transitioning in Chrome about d3-ease

[mbostock]

If you can post an example on bl.ocks.org or similar so I can take a look, that’d be great. If you can’t, unfortunately I can’t think of an immediate reason why the code above wouldn’t work as expected… sorry.

[skipjack]

Yep here's a pen that has the issue. That example is using v3 but it's essentially the same issue. It would take me a few days as I don't have time right this but I can update pen that to v4 if it'd be helpful.

Here's what I'm seeing:

May be a little tough to see in the gif, but it essentially just jerks back and forth erratically during the rotation.

You should be able to see the issue in Chrome (v60.0.3112.101 in my case), but if you open in another browser (Firefox is the other I tested) the animation runs perfectly. Thanks for your help!

[mbostock]

Thanks, that identified the problem. It’s your style here:

#q-loader * {
  transition: all 500ms;
}

When you do that, any change you make to a style on any descendent of #q-loader has a 500ms transition. In modern browsers, SVG presentation attributes have been unified with styles, so this style rule also applies to the transform attribute you are setting through JavaScript. Each time JavaScript changes the transform attribute, it triggers a new CSS transition, so the JavaScript doesn’t have a chance to run.

Either you should disable (or reduce the scope) or your transition CSS style, or you should not just JavaScript to run the transition.

[skipjack]

Ah I see, that makes sense. Didn't realize transition would affect transform attribute. Thanks for your help!