How to make transition dependent on block height?

How can I implement the transition effect with a formula using js or css? I need the transition speed to depend on the height of the block. Tell me how can I implement this?

MarkBoots•1/20/23, 10:13 AM

with JS, you can get the height of an element with element.getBoundingClientRect().heightelement.getBoundingClientRect().height it will return a pixel value (without the unit) . that value you can pass to CSS with a custom property and calculate with that

for example

const element = document.querySelector(".myElement");
element.style.setProperty('--height', element.getBoundingClientRect().height)

const element = document.querySelector(".myElement");
element.style.setProperty('--height', element.getBoundingClientRect().height)

.myElement{
  transition-duration: calc(0.5s * var(--height));
}

.myElement{
  transition-duration: calc(0.5s * var(--height));
}

If this is not what you need, please explain a bit more and provide simple example in CodePen.

MMarkBoots with JS, you can get the height of an element with `element.getBoundingClientRec...

EighthOP•1/20/23, 2:24 PM

Thank you, this is exactly what I need