反应弹簧等价于反应姿势姿势组

Question

React Pose PoseGroup 只是在列表使用 flipMove 选项更改列表元素时对列表元素进行动画处理

https://codesandbox.io/s/inspiring-herschel-37bvs

反应弹簧怎么做？

{items.map(item => (
<Item key={item} />
))}

如果删除了某个项目，我想对列表进行动画处理，并且动画可以顺利地填补空白

Answer 1

在反应弹簧中，动画到位置有点困难，因为您必须将位置作为样式进行操作。我喜欢使用基于钩子的动画，所以我将组件转换为功能。 解决这个问题的最好方法是 react-spring 中的 useTransition 函数。您可以为其定义起始样式、输入样式和保留样式。它将应用于删除或添加的每个数组项。

对于位置，我首先需要 y 位置作为数据，然后作为属性。所以我将索引映射为 y，并将其作为要插值的变量引入道具。

const [items, setItems] = React.useState([0, 1, 2, 3]);
const transitions = useTransition(
items.map((item, i) => ({ label: item, y: i })),
item => item.label,
{
from: { opacity: 0 },
leave: { opacity: 0 },
enter: ({ y }) => ({ y, opacity: 1 }),
update: ({ y }) => ({ y })
}
);

然后，您可以使用渲染部件中的过渡对象将项目与其中的样式进行映射。这里的诀窍是转换样式。y 现在根据数组顺序而变化。我们可以基于它创建一个不错的转换样式来移动项目。

<ul className="sidepanel">
{transitions.map(({ item, props, key }, index) => (
<animated.li
style={{
position: "absolute",
opacity: props.opacity,
transform: props.y.interpolate(
y => `translate3d(0,${y * 40}px,0)`
)
}}
className="item"
data-key={item.label % 5}
key={key}
onClick={() => {
setItems([0, 1, 3]);
}}
/>
))}
</ul>

最后，在示例中，我添加了一个添加随机播放按钮。 https://codesandbox.io/s/react-spring-position-animation-di9rb