Реагируйте с пружинным переходом, добейтесь прогрессивной задержки входа каждого элемента - PullRequest
Новая
       34

Реагируйте с пружинным переходом, добейтесь прогрессивной задержки входа каждого элемента

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

Первый пример, показанный на странице перехода реагирующей пружины, неверен, код не соответствует показанной анимации.

Как я могу добиться того же эффекта? Как я могу получить задержку между ввод каждого компонента и использование пружинного ослабления?.

Когда я пытаюсь это сделать, все компоненты вводятся одновременно.

Использовать пример перехода

1 Ответ

1 голос
/ 24 апреля 2020

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

В любом случае. Максимальная задержка c между элементами может быть достигнута с помощью свойства trail перехода. 

  const transitions = useTransition(items, item => item, {
    from: { transform: "translate3d(0,-40px,0)", display: "inline-block" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-40px,0)" },
    trail: 100
  });

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

https://codesandbox.io/s/new-bird-sztw9

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

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  const handleClick = async () => {
    if (items.length === 0) {
      set([3]);
      await sleep(1000);
      set([2, 3]);
      await sleep(1000);
      set([2, 3, 4]);
      await sleep(1000);
      set([1, 2, 3, 4]);
    } ...

https://codesandbox.io/s/shy-sky-56lrw

Это ближе к примеру. Но есть небольшие неровности, когда происходят монтирования / размонтирования переходов.

Я надеюсь, что это помогает.

Как примечание стороны. Я проверил исходный код страницы реакции-весны, и они обманывают. Первый пример - даже не использовать переходы для плавной анимации. Он использует интерполяцию для управления движением каждого числа. Это расширенное использование со специальными компонентами. 

      <RewindSpring>
        {x => (
          <>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.75, 1.0], output: [0, 1]}),
                transform: x.interpolate({range: [0.75, 1.0], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              1
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.25, 0.5], output: [0, 1]}),
                transform: x.interpolate({range: [0.25, 0.5], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              2
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.0, 0.25], output: [0, 1]}),
                transform: x.interpolate({range: [0.0, 0.25], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              3
            </animated.div>
            <animated.div
              style={{
                opacity: x.interpolate({range: [0.5, 0.75], output: [0, 1]}),
                transform: x.interpolate({range: [0.5, 0.75], output: [-40, 0], extrapolate: 'clamp'}).interpolate(x => `translate3d(0,${x}px,0)`)
              }}
            >
              4
            </animated.div>
          </>
        )}
      </RewindSpring>
...