Javascript 苗条的过渡：如何实现“入职”；在；动态苗条组件过渡等待出厂”字样；“出去”；纤细的组件完成

基本上，我正在进行一个幻灯片放映项目，其中每个“幻灯片”都是使用

动态加载的。每张幻灯片都需要逐个组件的自定义输入和输出转换。但是，我希望下一张幻灯片在当前幻灯片完成转换时“等待”，如svelte文档中所述：

与transition:不同，使用in:和out:应用的转换不是双向的-如果在转换过程中块被移出，则in转换将继续与out转换一起“播放”，而不是反转。如果退出转换被中止，转换将从头开始

是否有合理的方法让下一张幻灯片“等待”直到当前幻灯片完成outro转换

玩具示例

为子孙后代发布的玩具代码：

//App.svelte
从“./RedThing.svelte”导入RedThing；
从“./GreenThing.svelte”导入绿色物品；
从“./BlueThing.svelte”导入BlueThing；
常量幻灯片=[
红东西，
蓝东西，
绿东西
];
设currentComponent=0；
常量prev=（）=>currentComponent--；
const next=（）=>currentComponent++；
普雷弗奈特

//RedThing.svelte
从“苗条/过渡”导入{fly，slide}；
div{颜色：红色；}
红色的东西

//GreenThing.svelte
从“苗条/过渡”导入{fade，slide}；
div{color:green；}
绿色的东西

//BlueThing.svelte
从“苗条/过渡”导入{scale，fade}；
div{颜色：蓝色；}
蓝色的东西

编辑：我应该添加一个复杂的问题——我正在通过sapper锚定标记驱动组件遍历，这些标记负责组件的创建/销毁。换言之：

---

我不确定这是否有区别？

我通过添加

位置：绝对到每个动态组件的容器。这是因为转换将传入组件作为旧组件的同级添加到dom中，然后再销毁它。通过使位置为绝对位置，传出组件和传入组件位于同一位置。稍微调整一下淡入度可以让它看起来不错。这不是一个理想的解决方案，但可能已经足够了

例如：

//RedThing.svelte
从“苗条/过渡”导入{fly，slide}；
div{颜色：红色；}
红色的东西

//GreenThing.svelte
从“苗条/过渡”导入{fade，slide}；
div{color:green；}
绿色的东西

受此解决方案的启发，在页面之间创建sapper交叉渐变：
我知道这个线程已经有几个月了，这里有一个简单的解决方案。我也有这个问题。秘密？延迟参数：



//瘦小的
从“苗条/过渡”导入{fly，slide}；
div{颜色：红色；}
红色的东西

//GreenThing.svelte
从“苗条/过渡”导入{fade，slide}；
div{color:green；}
绿色的东西

//BlueThing.svelte
从“苗条/过渡”导入{scale，fade}；
div{背景色：蓝色；}
蓝色的东西
我也遇到过同样的UI模式问题，在它的smelte if子句中有一堆if div块，例如
{if currentlypentab=='profile\u settings'}内容。。。{:else if currentlypentag=='team'}团队内容等{/if}
。起初，我尝试在div块上进行绝对定位，这对我的UI布局的其余部分带来了很多副作用，因此我还决定采用非苗条的解决方法，使用
延迟
，例如
。这种模式不是内置的吗？