英文:
Svelte crossfade transition through grid cells always using fallback with multiple svelte files
问题
- 在两个 Svelte 文件中查看网格和动画元素的 REPL 演示：https://svelte.dev/repl/8b051c61cb7a435ba2645895ed7526ca?version=3.59.1
- 这是同一个网格和元素的 REPL，在一个文件中，带有工作的过渡动画：https://svelte.dev/repl/8f2b71256a7d4cc48bb104e74f8462cb?version=3.59.1
Svelte 的交叉淡入淡出过渡动画应该通过匹配关键字来制造元素从一个区域移动到下一个区域的幻觉。
我在一个存储库中跟踪元素的索引，同时通过 each 块生成的网格单元格将元素移动，通过向每个单元格添加 if 块来检查单元格的索引与元素的索引是否匹配。
当元素和网格位于不同的文件中时，当元素从一个单元格移动到另一个单元格时，我们只会看到备用动画。在一个文件中，它正常工作，但这成为了一个可维护性问题。我按照文档的每个指示进行操作，但关于边缘情况或最佳实践的信息很有限。
为什么过渡在一个组件文件中有效，而在两个文件中无效？有什么方法可以使其在两个文件之间有效吗？我宁愿不要有非常庞大的组件。提前感谢您的帮助！
更新：感谢所选答案，我意识到我需要在不会被卸载的地方实例化 crossfade 函数。最终，我创建了 transitions.ts 并将其导入到 Ball.svelte 文件中。
英文:
- See the REPL demonstration of the grid and animated element in two svelte files: https://svelte.dev/repl/8b051c61cb7a435ba2645895ed7526ca?version=3.59.1
- Here is a REPL of the same grid and element in one file with working transition animations: https://svelte.dev/repl/8f2b71256a7d4cc48bb104e74f8462cb?version=3.59.1
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.
答案1
得分: 2
我提前道歉，如果这不是一个高质量的答案。我不了解 Svelte 的内部机制，无法理解我即将给出的修复方案。我能提供的只是可行的代码和一个假设。
以下是一个 REPL，基本上使多文件功能正常工作：Svelte REPL
修复的原理
我的假设是，发送和接收函数必须在 {#each} 块出现的级别上使用。我猜想 Svelte 编译器在 {#each} 块和动画函数之间进行了一些绑定。如果将动画函数分离到不同的文件中，就无法发生这种魔法。
总结一下：你可以组件化任何内容，但保持 {#each} 和 send/receive 函数在一起。
英文:
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
Rationale Behind This
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论