如何在 Svelte 中设置条形高度向下的动画答案

【问题标题】：How to animate height of bars down in Svelte如何在 Svelte 中设置条形高度向下的动画
【发布时间】：2021-02-23 11:00:10
【问题描述】：

我正在尝试为下降的条形高度设置动画。我找到了“幻灯片”过渡，但不知道如何扭转它？目前，过渡正在上升。我应该为它做一个自定义过渡吗？有一种感觉，我在这里缺少一些基本的东西。我对 Svelte 很陌生。这是代码https://svelte.dev/repl/b869c0da3bdd46389e037b9dd194831f?version=3.32.3

提前谢谢你！

【问题讨论】：

标签： javascript d3.js svelte

【解决方案1】：

不是绝对肯定我了解您在 updateData 方法中尝试执行的操作以及您希望如何将其转化为动画。

事实上，通过过滤您的数据集，您将删除一半的数据点，因此您不能真正期望平滑过渡。

我修改了updateData函数，在修改前三个点的值的同时保持原来的数据点数：

function updateData() {
  // points = points.filter(d => d.year > 2000)
  points = points.map(d => ({ ...d, birthrate: d.year > 2000 ? d.birthrate : 0 }))
}

如您所见here，动画很流畅，可能更接近您的预期？

【讨论】：

谢谢！是的，过渡动画正是我所期望的。但是，我也希望数据能够更新。通过更新功能，我实际上只是过滤掉了数据，因此值会更新。我在 d3 的进入/更新/退出模式中寻找类似退出的东西
虽然我熟悉 Svelte，但我对 D3 不是很熟悉；) 但是，我查了您提到的模式。我认为这个想法是有复合动画：对于“退出”过渡，首先将栏设置为 0（我展示的动画），然后删除被归零的栏。对于“进入”过渡，首先添加一个值为 0 的新条，然后将该值设置为适当的数量。这里的关键是链接动画，所以一旦第一部分完成就触发第二部分。这对于事件应该是可行的。
实际上，在dataUpdate 函数中使用setTimeout 链接数据点更新要简单得多：svelte.dev/repl/fc633d59c07a4020937a5862e7b91438?version=3.32.3。这是你要找的吗？您可以使用超时值来更快地链接动画或强制它们之间稍微延迟。
对不起，不应该假设您对 D3 有一定的了解！是的，第二个就是我的想法！我实际上想让它们同时进行，但这可以通过减少 setTimeout 函数中的时间来很好地实现。我想我现在更好地理解了 Svelte 中的逻辑，这与 D3 的方式有点不同。非常感谢！
不客气！我认为这里的主要内容是，为了播放竖线动画，您必须过渡到y 值为 0 的状态。第二个要点是组合的想法您的动画有多个片段/组件（即在您的情况下是垂直动画 + 进入/退出动画）。