Q: Why Svelte transition (svg path) only works when I add a console.log? When I use the fade transition on a svg path like this:
<svg>
{#if visible}     
<path transition:fade d="M15.24,13.18l-4.77,7.94L236Z" transform="translate(0.24 34.65)"/>
{/if}
<path transition:fade d="2.65-4.41-3.35-4.41-3.35l-1.06-5.47h-3l-5.73,1.59-1.33,1.94-1.67" transform="translate(0.24 34.65)"/>
</svg>

Then the animation of fade out works perfectly fine whenever I toggle the boolean value of "visible", however, the fade in doesn't work and the path pops out abruptly.
However, if I add a reactive statement like this:
$: console.log(visible) then everything works fine.
I have to mention that the variable visible is a prop from this component, changed in a parent component and then the child reacts (console log indicates that the variable is changing properly from parent component and correctly received by child).
