Как создать карусель в React.js и Framer Motion

Я хочу создать анимированную карусель с Framer Motion в React.js. Идея состоит в том, чтобы увидеть, как два блока div меняются по горизонтали друг за другом при нажатии кнопки.

Когда я делаю это с AnimatePresence, первый div сжимается, потому что одновременно создается второй div. Здесь вы можете увидеть песочницу кода.

Я уже пробовал использовать exitBeforeEnter prop, но в моем случае это не работает. Я хочу увидеть два изменяющихся блока вместе. С exitBeforeEnter это невозможно.

Я также попытался установить положение компонента Slide на absolute. Проблема в том, что все свойства гибкости контейнера теряются. Контейнер не адаптируется к высокому уровню в зависимости от Slide компонента.

Как мне тогда это сделать?


reactjs animation carousel flexbox framer-motion
person Jöcker    schedule 02.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решаю с помощью сетки:

      <div
        class="container"
        style={{
          height: 400,
          display: "grid"
        }}
      >

    ...

    <motion.div
      style={{
        gridArea: "1 / 1 / 2 / 2",
        ...
      }}
    >
person Jöcker    schedule 02.09.2020