реактивно-пружинный эквивалент реактивной позы PoseGroup - PullRequest
Новая
       33

реактивно-пружинный эквивалент реактивной позы PoseGroup

0 голосов
/ 24 января 2020

React Pose PoseGroup просто анимирует элементы списка, когда список изменяется с опцией flipMove

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

Как это сделать с реагирующей пружиной? 

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

Я хотел бы анимировать список, если элемент удален, и анимация плавно заполняет пробел

1 Ответ

1 голос
/ 25 января 2020

Анимация положения немного сложнее в реагирующей пружине, так как вы должны манипулировать позициями как стилями. Мне нравится использовать анимацию на основе хуков, поэтому я преобразовал компонент в функцию. Лучший способ решить эту проблему - использовать функцию 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

...