Плавное появление кнопки через js на Height

Question

Нужно реализовать плавное появление кнопок при наведении на блок через height с js Через grid не подходит и через просто css тоже только через js нужно Именно через js не css Заранее спасибо

.box__inner-btn {
  display: none;
}
.box__inner:hover .box__inner-btn {
  display: block;
}

                <div class="box">
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                    <div class="box__inner">
                        <p class="box__inner-text">
                            Проектирование инженерных систем
                        </p>
                        <a href="#" class="box__inner-btn">
                                Подробнее
                        </a>
                    </div>
                </div>

Answer 1

Вот пример с использованием grid, но потребуется добавить ещё 2 элемента div.box_inner-content и ещё один div внутри

.box_inner-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.box__inner:hover .box_inner-content {
  grid-template-rows: 1fr;
}

.box_inner-content > div {
  overflow: hidden;
}

<div class="box">
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
     <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
     </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box_inner-content">
      <div>
        <a href="#" class="box__inner-btn">
          Подробнее
        </a>
      </div>
    </div>
  </div>
</div>

Попытка №2: Вот пример без использования css а только с использованием js.

const box = document.querySelector('.box');
const boxInner = box.querySelectorAll('.box__inner');

boxInner.forEach((item) => {
  const trigger = item.querySelector('.box__inner-text');
  const content = item.querySelector('.box__inner-content');

  const height = content.scrollHeight;

  trigger.addEventListener('mouseover', () => {
    content.style.height = height + 'px';
  })

  trigger.addEventListener('mouseout', () => {
    content.style.height = 0 + 'px';
  })
})

.box__inner-content {
  height: 0;
  overflow: hidden;
  transition: 200ms;
}

<div class="box">
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
  <div class="box__inner">
    <p class="box__inner-text">
      Проектирование инженерных систем
    </p>
    <div class="box__inner-content">
      <a href="#" class="box__inner-btn">
        Подробнее
      </a>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Плавное появление кнопки через js на Height

Ответы (1 шт):