I am trying to make an SVG element change instantly to black and then immediately start to slowly fade to white, in a repeatable fashion (if triggered again mid-fade it should jump instantly to black and start the animation over).

I can't do this with CSS because the duration value is calculated at runtime in Javascript.

I tried this:

node.style.transition = 'none';
node.style.fill = 'black';
node.style.transition = `fill ${duration}s ease-out`;
node.style.fill = 'white';

However this only works if I slightly offset the transition to white, like this:

node.style.transition = 'none';
node.style.fill = 'black';
setTimeout(() => {
    node.style.transition = `fill ${duration}s ease-out`;
    node.style.fill = 'white';
}, 10);

Otherwise the instant transition to black isn't rendered at all, and the node stays white.

Why is this happening, and can it be avoided without resorting to setTimeout?