Узнать размеры компонента(элемента) до его отображения

Question

Есть ли способ узнать размеры (ширину и высоту) React-элемента, чтобы потом его потом плавно анимировать, именно свойства hight & width?

В обычной ситуации я знаю, что есть подобное:

document.body.append(div);
div.offsetWidth
div.clientWidth;
div.remove();

И оно работает.

Но как в реакт провернуть подобное, не знаю

Answer 1

Возможно я немножко старомоден, но зачем тут React и даже JS?

.popOver {
    background-color: #d9dfe5;
    animation: bummer 2s;
    transform: scale(0,0);
    animation-fill-mode: forwards;
}


@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}

<div class="popOver">
  Супер DIV
</div>

UPD вариант с замерами

const foo = () => {
  const wrapper = document.getElementById('wrapper');
  gsap.to(wrapper, {
    duration: 0.5,
    height: wrapper.scrollHeight,
  });
};

setTimeout(foo, 500);

.img{
  width: 200px;
}

#wrapper{
  height: 0px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<div id="wrapper">
  <img src="https://s2.cdn.teleprogramma.pro/wp-content/uploads/2020/02/webp_l/fd8181da239a741ce9420cbdbefaa8f8.webp" class="img">
</div>
<div>
  Бред Питт
</div>

БЛОГ НА HUSL

Узнать размеры компонента(элемента) до его отображения

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