React-Spring 过渡“离开”动画不起作用答案

【问题标题】：React-Spring transition 'leave' animation not workingReact-Spring 过渡“离开”动画不起作用
【发布时间】：2019-10-03 18:31:11
【问题描述】：

当 spring 项目离开 DOM 时，什么也没有发生（没有离开动画）。

完整代码沙盒：https://codesandbox.io/s/jzz6xv1y4w

const Todo = ({ todo, onDeleteClick }) => {
  const transition = useTransition(todo, null, {
    from: { opacity: 0, transform: "translateY(-10px)" },
    enter: { opacity: 1, transform: "translateY(0)" },
    leave: { opacity: 0, transform: "translateY(10px)" }
  });
  return transition.map(
    ({ item, props, key }) =>
      item && (
        <TodoContainer style={props} key={key}>
          <span>{todo}</span>
          <button onClick={onDeleteClick}>X</button>
        </TodoContainer>
      )
  );
};

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

将过渡移至应用组件。过渡应该处理所有的待办事项。这样它就可以控制进入和离开事件。

<div className="App">
  <h1>Todo App</h1>
  <input type="text" ref={ref} />
  <input type="submit" onClick={() => addTodo(ref.current.value)} />
  {/*  */}
  {transition.map(
    ({ item, props, key }, i) =>
      item && (
        <Todo
          transition={props}
          todo={item}
          onDeleteClick={() => deleteTodo(i)}
          key={key}
        />
      )
  )}
</div>

);

Todo 组件会更简单：

const Todo = ({ todo, onDeleteClick, transition }) => {
  return (
    <TodoContainer style={transition}>
      <span>{todo}</span>
      <button onClick={onDeleteClick}>X</button>
    </TodoContainer>
  );
};

还要确保为转换提供唯一的密钥。它有助于确定哪个组件正在进入，哪些正在离开。我在示例中使用 todo 文本作为键。

这是示例：https://codesandbox.io/s/goofy-chaplygin-whvt4

【讨论】：

【解决方案2】：

您必须在transition.map 中渲染所有元素。现在您自己在transition.map 之外渲染它们，但将每个元素包装在transition.map 中。您的 Todo 元素在此处呈现和删除：

{todos.map((x, i) => (
    <Todo todo={x} onDeleteClick={() => deleteTodo(i)} key={x} />
))}

但它们必须在这里渲染和删除：

return transition.map(
    ({ item, props, key }) => (
        <TodoContainer style={props} key={key}>
          <span>{item}</span>
          <button onClick={onDeleteClick}>X</button>
        </TodoContainer>
      )
  );

您需要更改您的组件Todo。它应该呈现所有项目。

我为你创建了一个工作示例：https://codesandbox.io/s/trusting-dewdney-jerxy

【讨论】：