React-Spring переход "оставить" анимация не работает - PullRequest
Новая
       21

React-Spring переход "оставить" анимация не работает

0 голосов
/ 16 мая 2019

Когда пружинные элементы покидают DOM, ничего не происходит (анимация без отрыва).

Полный CodeSandbox: 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>
      )
  );
};

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Переместите ваш переход к компоненту приложения.Переход должен обрабатывать все задачи.Таким образом, он может контролировать события входа и выхода. 

<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

0 голосов
/ 16 мая 2019

Вы должны визуализировать все свои элементы внутри 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

...