Estoy tratando de hacer que un elemento SVG cambie instantáneamente a negro y luego comience a desvanecerse lentamente a blanco, de manera repetible (si se activa nuevamente a mitad del desvanecimiento, debería saltar instantáneamente a negro y comenzar la animación de nuevo).

No puedo hacer esto con CSS porque el valor de duración se calcula en tiempo de ejecución en Javascript.

Intenté esto:

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

Sin embargo, esto solo funciona si compenso ligeramente la transición a blanco, así:

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

De lo contrario, la transición instantánea a negro no se procesa en absoluto y el nodo permanece en blanco.

¿Por qué sucede esto? ¿Se puede evitar sin recurrir a setTimeout ?