我的状态
我有一个数组项，格式如下:
[{ left: 0 }, { left: 10 }, { left: 20 }]
我可以添加一个项目{ left: 30 }到这个数组:
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]
我可以添加一个重复的项目{ left: 20 }到这个数组:
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]
我认为
我必须在平面上渲染这些项目，在位置x，其中x是它们的左属性。
[{ left: 0 }, { left: 10 }, { left: 20 }]渲染|item1 item2 item3|
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]渲染|item1 item2 item3 item4 item5|
当存在重复时，我必须通过向左或向右移动元素来解决这个重复。所以
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]渲染|item1 item2 item3 item4 item5|
所以它们不应该重叠
我可以一个一个地添加新项，其中新项可以是任意左属性的10倍。
在重叠的情况下，项目应该通过右移来解决重叠。
这可能导致多个项目向右移动。
的例子:
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }, { left: 40 }]
解决这个问题需要移动两个带有left属性的项30和40。它变成了
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }, { left: 40 }, { left: 50 }]
移动的项目必须动画/补间。我如何在React和flux架构中执行这个要求?
。通过调整模型的左侧属性来解决存储中的重叠，用渐变来反映视图中的变化。如何在React组件中反映渐变的变化?-如何解决重叠?
你可以使用React Motion这样的库。
它可以像你描述的那样在列表之间进行过渡。