Простая анимация с использованием useTransition в react-spring - PullRequest
Новая
       142

Простая анимация с использованием useTransition в react-spring

0 голосов
/ 08 мая 2020

У меня есть очень простой пример с useTransition, я ожидаю, что всякий раз, когда я нажимаю кнопку shuffle, элементы ниже меняются местами с плавной анимацией. Но я не работаю, элемент меняет местами, но также свойство pos. Я думаю, что я понимаю, что в key в useTransition что-то не так, но я не могу его найти.

мой текущий код: https://codesandbox.io/s/wonderful-solomon-c0sve?file= / src / index.jsx

я пытаюсь сделать что-то вроде это 

function App() {

  const [items, setState] = useState([
    { name: 'C' },
    { name: 'D' },
    { name: 'E' },
    { name: 'F' },
    { name: 'G' },
    { name: 'A' },
    { name: 'B' },
  ]);

  let index = -1;
  const gridItems = items.map((item) => {
    index += 1;
    return { ...item, pos: index * 60 };
  });

  const transitions = useTransition(gridItems, item => item.name, {
    from: () => ({ pos: -100 }),
    enter: ({ pos }) => ({ pos }),
    udpate: ({ pos }) => ({ pos }),
    leave: () => ({ pos: -100 }),
  });

  return (
    <div>
      This is app<br/>
      <button onClick={ () => setState(Lodash.shuffle) }>shuffle</button><br/><br/>
      <div>
        {transitions.map(({ item, props, key }) => {
          return (
            <animated.div
              key={key}
              className="item"
              style={{ transform: props.pos.interpolate(pos => `translateY(${pos}px)`) }}
            >
              {`${item.name}`}
            </animated.div>
          )
        })}
      </div>
    </div>
  )
}

1 Ответ

2 голосов
/ 08 мая 2020

Это была эпоха, чтобы понять это. Вы допустили опечатку. Попробуйте с этим: 

update: ({ pos }) => ({ pos }),
...