Реакт - Карусель с переходами между слайдами, реагирующая пружина - PullRequest
Новая
       10

Реакт - Карусель с переходами между слайдами, реагирующая пружина

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

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

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

Я просто хочу постепенно увеличивать / уменьшать только данные, когда пользователь нажимает "влево" Кнопки «/» вправо. В настоящее время он начинает исчезать из моего контента, но затем создает клон моей карусели и не исчезает ... Я не уверен, что делаю неправильно, или это правильный хук, который я должен использовать?

В конечном итоге я предпочел бы ошеломляющую анимацию, когда содержимое затухает с некоторой задержкой между каждым элементом. Например: заголовок, затем цена, затем описание и т. Д. c будут постепенно исчезать, но с задержкой 300 мс между каждым элементом.

Вот что у меня сейчас есть: 

const mod = (n: any, m: any) => ((n % m) + m) % m;

const CarouselContainer: React.FC = () => {
  const [index, setIndex] = useState(0);

  const handlePrev = useCallback(() => {
    setIndex(state => mod(state - 1, data.length));
  }, [setIndex]);

  const handleNext = useCallback(() => {
    setIndex(state => mod(state + 1, data.length));
  }, [setIndex]);

  const transitions = useTransition([index], (item: number) => item, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <>
      {transitions.map(({ item, props, key }) => (
        <Carousel
          prevClick={handlePrev}
          icon={data[item].icon}
          title={data[item].title}
          price={data[item].price}
          description={data[item].description}
          href={data[item].href}
          nextClick={handleNext}
          style={props}
          key={key}
        />
      ))}
    </>
  );
};

Там довольно много кода, поэтому я предоставляю CodeSandBox , вилки оценены! :)

1 Ответ

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

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

Для этого вам нужно изменить значение на position: absolute здесь: 

const StyledWrapper = styled.div`
  position: absolute;
  display: grid;
  grid-template-columns: auto auto 20% 20% 1fr auto auto;
  grid-template-rows: 3em 1fr auto 1fr 3em;
  grid-gap: 0;
`;

Я бы попытался добавить к нему некоторое движение: 

  const transitions = useTransition([index], (item: number) => item, {
    from: { opacity: 0, transform: 'translateX(-420px)' },
    enter: { opacity: 1, transform: 'translateX(0px)' },
    leave: { opacity: 0, transform: 'translateX(420px)' }
  });

А вот ваш модифицированный код: https://codesandbox.io/s/empty-rgb-xwqh1

Далее вы захотите обработать направление движения в соответствии с нажатой кнопкой. Вот пример для этого: https://codesandbox.io/s/image-carousel-with-react-spring-usetransition-q1ndd

...