本质上,我正在开发一个幻灯片项目,其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件地自定义进出转换。然而,正如 svelte 文档中所述,我希望下一张幻灯片在当前幻灯片完成转换时“等待”:
\n\n\n与transition:不同,使用in:和out:应用的转换不是双向的\xe2\x80\x94,如果在转换时块被淘汰,则in转换将继续与out转换一起“播放”,而不是反转正在处理。如果输出转换被中止,转换将从头开始重新开始。
\n
是否有一种明智的方法可以使下一张幻灯片“等待”,直到当前幻灯片完成其结尾过渡?
\n\nREPL的玩具示例
\n\n为后代发布的玩具代码:
\n\n//App.svelte\n<script>\n import RedThing from \'./RedThing.svelte\';\n import GreenThing from \'./GreenThing.svelte\';\n import BlueThing from \'./BlueThing.svelte\';\n\n const slides = [\n RedThing,\n BlueThing,\n GreenThing\n ];\n let currentComponent = 0;\n const prev = () => currentComponent--;\n const next = () => currentComponent++;\n\n</script>\n\n<button on:click={prev}>Prev</button><button on:click={next}>Next</button>\n<div>\n <svelte:component this={slides[currentComponent]}/>\n</div>\n\nRun Code Online (Sandbox Code Playgroud)\n\n//RedThing.svelte\n<script>\n import { fly, slide } from \'svelte/transition\';\n</script>\n\n<style>\n div { color: red; }\n</style>\n\n<div …Run Code Online (Sandbox Code Playgroud)