Svelte 过渡方向开关问题

Question

我正在使用 each 块来遍历项目数组，并在其中使用 if 块来检查应显示哪些项目，以及 fly transition 被应用到带有控制过渡方向的变量的内部项目，这样如果用户点击 next 一切都会从 <-- 这样，如果他们点击上一个按钮一切都会出去和进来从 --> 这样。

效果很好，只有一个例外。当用户朝一个方向前进，然后他们点击另一个方向时，当前显示的项目的输出动画会朝错误的方向移动，但仅在第一个输出动画上出现，然后它会排成一行。这是问题的 REPL：https://svelte.dev/repl/1aa3608458f84a4fb4d93b10b47ae3f1?version=3.25.0

有没有办法让第一个结尾动画在方向改变后走正确的路？我觉得有什么东西我没有看到。

编辑：

有一个 Github 问题似乎与此问题有些相关。

正如我在 Github 问题中指出的那样，该行为似乎只影响 each 块内的项目。 REPL 显示了在动态 x 方向上按预期工作的行为。

我想出了 this workaround，我将过渡移动到 each 块的父元素并复制它，然后交替显示哪个 each 块。

我很想知道是否有更好的解决方法，因为复制很痛苦。如果不是我就把它做成一个组件然后羞愧地把它藏起来。

Answer 1

我相信这种行为的原因是你在知道“out”的方向之前就定义了“out”函数，因此如果你改变方向，方向就会错误。
您可以为“out”定义自己的函数，当您 select 方向时它是运行，因此您可以在自己的函数中使用正确的方向。
我不确定我的解释是否正确，但这是有效的示例：

const myOut=(el)=>{
  return fly(el,{x:-x, duration:600})
}

在div中：

out:myOut|local

Svelte 过渡方向开关问题

Svelte Transition Direction Switch Issue

svelte

svelte-3