Как сделать плавное увеличение высоты текста?

Question

[DZHAMBUALT]

Здрасте. Возникла очередная проблема и возможно я задаю очень заезженный вопрос. Почему при изменении высоты с 0 до 100% нет плавности даже при использовании transtition. Хотел добиться плавности с помощью transform scale но это выглядит не так красиво ка хотелось бы. Можете объяснить как добиться плавности для height

HTML

<!-- GROUP -->
            <ul class="faqs-block__questions">
              <!-- ITEM -->
              <li class="faqs-block-quetions__item">
                <!-- TITLE -->
                <div class="faqs-block-question__title">
                  <!-- IMG -->
                  <div class="faqs-block-question-title__img">
                    <img
                      src="../../IMG/ASSETS/ICONS/arrow-black.svg"
                      alt="arrow"
                    />
                  </div>
                  <!-- TEXT -->
                  <h2 class="component-te-1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur sodales ?
                  </h2>
                </div>
                <!-- CONTENT -->
                <div class="faqs-block-question__content">
                  <h2 class="component-te-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur sodales eleifend dolor vel cursus. Fusce in ligula
                    ut leo eleifend lobortis fringilla non elit. Vivamus mollis,
                    odio ac finibus rutrum, libero augue venenatis leo, in
                    maximus ipsum dui et est.
                  </h2>
                </div>
              </li>
              <!-- ITEM -->
              <li class="faqs-block-quetions__item">
                <!-- TITLE -->
                <div class="faqs-block-question__title">
                  <!-- IMG -->
                  <div class="faqs-block-question-title__img">
                    <img
                      src="../../IMG/ASSETS/ICONS/arrow-black.svg"
                      alt="arrow"
                    />
                  </div>
                  <!-- TEXT -->
                  <h2 class="component-te-1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing ?
                  </h2>
                </div>
                <!-- CONTENT -->
                <div class="faqs-block-question__content">
                  <h2 class="component-te-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Curabitur sodales eleifend dolor vel cursus. Fusce in ligula
                    ut leo eleifend lobortis fringilla non elit. Vivamus mollis,
                    odio ac finibus rutrum, libero augue venenatis leo, in
                    maximus ipsum dui et est.
                  </h2>
                </div>
              </li>
            </ul>

CSS

/* GROUP */
.faqs-block__questions {
  display: flex;
  row-gap: 20px;
  flex-flow: wrap column;
}
/* --ITEM */
.faqs-block-quetions__item {
  border-bottom: 1px solid blue;
}
/* ----TITLE */
.faqs-block-question__title {
  display: flex;
  align-items: center;
  column-gap: 7px;
}
.faqs-block-question__title h2 {
  color: var(--darkGrey);
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 700;
  text-transform: capitalize;
}
/* ------IMG */
.faqs-block-question-title__img {
  transform: rotate(0deg);
  transition: 0.2s all linear;
}
.faqs-block-quetions__item.--active .faqs-block-question-title__img {
  transform: rotate(180deg);
}
/* ----CONTENT */
.faqs-block-question__content {
  line-height: 26px;
  margin: 15px 0;
  transform-origin: center top;
  height: 0;
  overflow: hidden;
}
.faqs-block-quetions__item.--active .faqs-block-question__content {
  height: 100%;
}

JS

const textBtns = document.querySelectorAll(".faqs-block-question__title");

textBtns.forEach((el) => {
  el.addEventListener("click", () => {
    el.parentNode.classList.toggle("--active");
  });
});

Comments

[szQocks]

как вариант - замени height на max-height в паре с transition, и меняй на max-height 300, например

Answer 1

[imko]

100% величина относительно родителя, у родителя высоты тоже своей нет, она не может быть высчитана, переход от 0 к ничему соответственно не может быть плавным. У тебя классический баян должен получиться. Если можно гарантировать что текст не будет выше какой-либо высоты (как в комменте 300 пикселей например) то проще всего менять max-height с нуля до этой величины, а так по хорошему текст надо кинуть в обертку, у нее менять высоту/максимальную высоту с нуля до ее scrollHeight, которая будет равна высоте ее контента - текста. Есть еще хак с grid-template-rows 0fr/1fr но не везде работает

Comments

[DZHAMBUALT]

Спасибо. Решил задачу с помощью обертки текста в блок, и у обёртки стал менять высоту в зависимости от высоты текста

В CSS изменил:

/* ----CONTENT */
.faqs-block-question__content {
  line-height: 26px;
  margin: 15px 0;
  transform-origin: center top;
  max-height: 0;
  overflow: hidden;
/* ЗАМЕНИЛ height:0 на max-height:0 */
}
.faqs-block-quetions__item.--active .faqs-block-question__content {
/* УБРАЛ heigt: 100% */
}

Вот скрипт который получился JS

const textBtns = document.querySelectorAll(".faqs-block-question__title");

textBtns.forEach((el) => {
  el.addEventListener("click", (elem) => {
    el.parentNode.classList.toggle("--active");

    if (
      elem.target
        .closest(".faqs-block-quetions__item")
        .classList.contains("--active")
    ) {
      elem.target
        .closest(".faqs-block-quetions__item")
        .querySelector(".faqs-block-question__content").style.maxHeight = `${
        elem.target
          .closest(".faqs-block-quetions__item")
          .querySelector(".faqs-block-question__content>h2").offsetHeight
      }px`;
    } else if (
      !elem.target
        .closest(".faqs-block-quetions__item")
        .classList.contains("--active")
    ) {
      elem.target
        .closest(".faqs-block-quetions__item")
        .querySelector(".faqs-block-question__content").style.maxHeight = `0px`;
    }
  });
});