Framer Motion: flexbox с justify-content: space-around или gap вызывает сбой анимации макета

На чтение 3 мин Опубликовано 10.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Основные рекомендации
Исправленный код
Компонент App.jsx
CSS файл
Заключение

Вопрос или проблема

Я пытаюсь добиться плавного перехода в flexbox, когда элемент удаляется.

Кажется, что когда flexbox использует свойства gap или justify-content, пространство вокруг удаленного элемента исчезает мгновенно. Это приводит к тому, что другие элементы в flexbox перемещаются мгновенно на свои новые позиции без какой-либо анимации, несмотря на то, что у них применено свойство компоновки.

Ожидаемое поведение:

Оставшиеся элементы должны плавно переходить на свои новые позиции, когда элемент удаляется.

Вот код, демонстрирующий проблему:
Песочница (вы можете нажать на красное поле, чтобы показать/скрыть средний элемент)

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <motion.div id="container" onClick={() => setShow((prev) => !prev)} layout>
      <motion.div className="box" key="test1" layout>
        элемент 1
      </motion.div>
      <AnimatePresence>
        {show && (
          <motion.div className="box" exit={{ width: 0 }} key="test2">
            элемент 2
          </motion.div>
        )}
      </AnimatePresence>
      <motion.div className="box" key="test3" layout>
        элемент 3
      </motion.div>
    </motion.div>
  );
}

#container {
  background: red;
  width: 500px;
  height: 300px;
  display: flex;
  /* justify-content: space-around; */
  gap: 100px;
}

.box {
  background: blue;
  height: 50px;
  width: 50px;
  overflow: hidden;
}

Как я могу добиться плавных переходов для оставшихся элементов в этом сценарии?

Версия React: 18.3.1

Версия Framer Motion: 11.11.7

Ответ или решение

Вопрос, который вы подняли, касается сбоев при анимации в гибкой верстке (flexbox) с использованием свойств gap или justify-content. Проблема заключается в том, что при удалении элемента оставшиеся элементы перемещаются мгновенно, а не плавно, как ожидалось. Чтобы решить эту проблему, нужно внести некоторые изменения в ваш код и подойти к стилям немного иначе.

Основные рекомендации

Избегайте использования gap в сочетании с анимациями при удалении элементов. Это свойство не поддерживает плавные переходы при изменении размеров контейнера. Вместо этого, используйте margin для заданий расстояний между элементами.
Используйте layout и AnimatePresence для контролирования анимаций. Убедитесь, что ваши элементы с layout включены в AnimatePresence, чтобы переходы происходили гладко.

Вот исправленный код, который должен помочь вам достичь ожидаемого поведения.

Исправленный код

Компонент App.jsx

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function App() {
  const [show, setShow] = useState(true);

  return (
    <motion.div id="container" onClick={() => setShow(prev => !prev)}>
      <motion.div className="box" key="test1" layout>
        элемент 1
      </motion.div>
      <AnimatePresence>
        {show && (
          <motion.div
            className="box"
            exit={{ width: 0, opacity: 0 }}  // Добавление opacity для более гладкой анимации
            key="test2"
            layout
          >
            элемент 2
          </motion.div>
        )}
      </AnimatePresence>
      <motion.div className="box" key="test3" layout>
        элемент 3
      </motion.div>
    </motion.div>
  );
}

CSS файл

#container {
  background: red;
  width: 500px;
  height: 300px;
  display: flex;
  /* margin: 0 50px; */ /* Убираем gap и добавляем отступы по бокам, если это нужно */
  flex-direction: row;
}

.box {
  background: blue;
  height: 50px;
  width: 50px;
  overflow: hidden;
  margin: 0 50px; /* Используем margin для отступов между элементами */
  transition: all 0.3s ease; /* Добавляем анимацию для плавного перехода */
}

Заключение

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

Таким образом, при нажатии на контейнер элемент будет исчезать с анимацией, а остальные элементы будут плавно перемещаться на свои новые позиции.