Блог

Как сделать так, чтобы div плавно расширялся при добавлении содержимого?

 const [render, setRender] = useState(false)

    const showHide= () => {
        setRender(!render)
    }

  return (
    <div className="container">
      <h1>TEST CONTAINER</h1>
      {render amp;amp; <Paragprah />}
      <button type="button" class="btn btn-primary" onClick={showHide}>Primary</button>
    </div>
  );
}
 

CSS

 .container {
  margin-left: 30%;
  margin-top: 10%;
  width: 500px;
  height: auto;
  background-color: whitesmoke;
}
 

В приведенном выше примере компонент отображается при нажатии кнопки, когда в div добавляется новое содержимое, оно мгновенно расширяется. в принципе, я бы хотел, чтобы он плавно расширялся при добавлении контента. Вот видео, а также то, что я имею в виду, когда оно мгновенно расширяется.

Установка фиксированной высоты не сработает в моей ситуации, потому что загружаемый контент динамичен, он поступает из API, а длина каждый раз разная. Поэтому установка фиксированной высоты иногда приводит к переполнению содержимого. Мне нужен способ, при котором переход может происходить плавно, а высота по-прежнему будет достаточно большой, чтобы соответствовать содержимому, что, вероятно, потребует присутствия «height: auto;`?

Ссылка на видео Imgur

вы можете использовать свойство css перехода для плавного перехода.

 transition: height 2s;
 

Перейдите по этой ссылке для справки.

Здесь я обновил код. Поскольку загружаемый контент имеет динамический размер, вам необходимо отслеживать этот размер контента с помощью useRef hook, сохранять его в переменной и экспортировать с помощью вашего компонента.

 import { useRef, useEffect} from "react";

var ParagraphHeight;

function Paragraph() {
  const ref = useRef(null);

  useEffect(() => {
    //when you content is loaded store its height
    ParagraphHeight = ref.current.offsetHeight;
  }, []);

  return (
    <div ref={ref}>
      <p>Your content here for exemple...</p>
    </div>
  );
}

export { Paragraph, ParagraphHeight };
 

Теперь импортируйте компонент абзаца и поместите его в .wrapper div, высота которого по умолчанию равна 0 пикселей (это означает, что ваш абзац будет скрыт), и при нажатии на кнопку его высота изменится на высоту абзаца

 import { useState } from "react";
import { Paragraph, ParagraphHeight } from "./Paragraph.js";

export default function App() {
  const [isopned, setisopned] = useState(false);
  const [wrapperHeight, setWH] = useState(0);
  const showHide = () => {
    if (!isopned) setWH(ParagraphHeight);
    else setWH(0);
    setisopned(!isopned);
  };

  return (
    <div className="container">
      <h1>TEST CONTAINER</h1>
      <div className="wrapper" style={{ height: wrapperHeight }}>
        <Paragraph />
      </div>
      <button type="button" className="btn btn-primary" onClick={showHide}>
        Primary
      </button>
    </div>
  );
}
 

Наконец, не забудьте обновить свой css, добавить скрытый переполнение и css-переход, чтобы плавно развернуть div-оболочку.

 .container {
  margin-left: 30%;
  margin-top: 10%;
  width: 500px;
  background-color: whitesmoke;
}

.wrapper {
  display: grid; /*to prevent some problem caused by overflow hidden*/
  transition: height 1s linear;
  background-color: wheat;
  overflow-y: hidden;
}
 

Это демонстрационный пример в реальном времени