苗条的过渡方向开关问题答案

【问题标题】：Svelte Transition Direction Switch Issue苗条的过渡方向开关问题
【发布时间】：2020-12-31 01:11:31
【问题描述】：

我正在使用 each 块来迭代项目数组，并在其中使用 if 块来检查应显示哪些项目，并将 fly 转换应用于内部项目带有一个控制转换方向的变量，这样如果用户点击下一个，所有东西都从这种方式进来。

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

有没有什么方法可以让第一个结尾动画在方向改变后走上正轨？我觉得有些东西我没有看到。

编辑：

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

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

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

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

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

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

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

在 div 中：

out:myOut|local

【讨论】：

感谢您的回答，但我不知道这与我遇到的实际问题完全相关。我在问题中添加了新信息，似乎由于某种奇怪的原因，这只发生在每个块内。
你说得对，好像是each相关的问题。我的解决方案似乎有效，我相信这是由于在 out 即将运行时以某种方式强制 x 更新为正确值。
哇，您的解决方案确实有效。对不起，我直到现在才试一试。我什至做了一个完整的组件来在 2 个相同的插槽之间切换。
很高兴听到它有帮助。我没有找到从outrostart 访问动画参数的方法。我相信outrostart 将是在out 开始之前更改动画属性的最佳时机。