The Svelte cross-fade transition animation is supposed to create the illusion that the element is shifting from one area to the next by matching the key.
I am keeping track of the element's index in a store while moving an element through grid cells generated by an each block by adding an if block to each cell and to check the cell's index against the element index.
When the element and grid are in different files, when the element moves from one cell to another, we only ever see the fallback animation. In one file, it works, but this is becomes a maintainability issue. I am following every instruction per the docs, but there isn't much information about edge cases or best practices.
Why does the transition work in one component file and not in two files? Is there something I can do to make it work between two files? I'd rather not have hideously large components. Thanks in advance for your help!
UPDATE: Thanks to the selected answer, I realized that I needed to instantiate the crossfade function somewhere that wouldn't be dismounted. I ended up creating transitions.ts and importing it into the Ball.svelte file.
I apologize in advance if this is not a quality answer. I don't know the guts of Svelte in order to rationalize the fix I'm about to give you. All I can give you is working code and a hypothesis.
The following is a REPL that basically makes the multiple file thing work: Svelte REPL
My hypothesis is that the send and receive functions must be used at the level where the {#each} block appears. I suppose that the Svelte compiler is doing some binding between the {#each} block and the animation functions. If you separate the animation function into a different file, the magic cannot happen.
So, summarizing: You may componetize all you want, but keep {#each} and the send/receive functions together.