小编fis*_*ish的帖子

Svelte 转换:如何使传入“in”动态 Svelte 组件转换等待传出“out”Svelte 组件完成

本质上,我正在开发一个幻灯片项目,其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件地自定义进出转换。然而,正如 svelte 文档中所述,我希望下一张幻灯片在当前幻灯片完成转换时“等待”:

\n\n
\n

与transition:不同,使用in:和out:应用的转换不是双向的\xe2\x80\x94,如果在转换时块被淘汰,则in转换将继续与out转换一起“播放”,而不是反转正在处理。如果输出转换被中止,转换将从头开始重新开始。

\n
\n\n

是否有一种明智的方法可以使下一张幻灯片“等待”,直到当前幻灯片完成其结尾过渡?

\n\n

REPL的玩具示例

\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\n
Run 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)

javascript svelte sapper svelte-3

7
推荐指数
2
解决办法
6347
查看次数

标签 统计

javascript ×1

sapper ×1

svelte ×1

svelte-3 ×1