элементы перемешиваются во время перехода из использования - PullRequest
Новая
       151

элементы перемешиваются во время перехода из использования

0 голосов
/ 03 августа 2020

Я пытаюсь использовать перехватчик response-spring useTransition для переключения между массивом элементов и расширенной версией того же массива. Переход выглядит нормально при расширении, но при обратном переходе элементы перемешиваются. В частности, последний элемент в старом списке перемещается на первую позицию при переходе из него. Как я могу предотвратить это? Я пробовал все комбинации параметров « reset » и « unique », изменяя исходный массив вместо переключения между двумя массивами, но, похоже, ничего не помогает.

Я обнаружил аналогичную проблему в React-Spring. UseTransition перемещает элементы моего списка вокруг , но и исходная, и «песочница решения» не работают. Также простой переход на более новую версию не является для меня решением.

Вот рабочий минимальный пример, показывающий проблему: https://codesandbox.io/s/recursing-aryabhata-8u2ri

1 Ответ

1 голос
/ 03 августа 2020

Ваша проблема очень расстраивает, потому что она должна работать, и это такой простой пример. Я не мог найти простого решения прямо сейчас. Это должно быть связано с ключами.

Но у меня это работает с более новыми версиями. Если вы измените, например, 9.0.0-beta.1.

Вы также можете попробовать новейшую версию 9.0.0-r c .3. С нетерпением жду нового релиза 9. Переход полностью переработан.

Вы можете прочитать об изменениях здесь: https://aleclarson.github.io/react-spring/v9/#The -useTransition-rework

Ваш пример выглядит так с 9.0.0-r c .3: 

const itemsA = ["a", "b", "c"];
const itemsB = ["d", "e", "f"];

export default function App() {
  const [expanded, setExpanded] = useState(false);
  const items = expanded ? [...itemsA, ...itemsB] : [...itemsA];
  const transition = useTransition(items, {
    from: { opacity: 0, transform: "translate3d(100%,0,0)" },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: { opacity: 0, transform: "translate3d(50%,0,0)" },
    keys: p => p
  });

  return (
    <div className="simple-trans-main" onClick={() => setExpanded(!expanded)}>
      {transition((style, item, t, i) => (
        <animated.div style={style}>
          <h1>{item}</h1>
        </animated.div>
      ))}
    </div>
  );
}

https://codesandbox.io/s/basic-transition-with-v9-react-spring-ojp4w

...