Home How to force transition animation for properties not yet defined on the element?

Questions

How to force transition animation for properties not yet defined on the element?

October 11, 2022

I have this code:

    var c = document.getElementById('container');

    function expand() {
        c.style.maxHeight = ~~(Math.random() * 50 + 50) + 'px'; // it can be any value
        // Since the value is dinamic, static solutions (like CSS Animations) are not allowed
    }

    function shrink() {
        c.style.maxHeight = '0px';
    }

    .container {
        transition: max-height 1s ease;
        border: 1px solid #000;
        overflow: auto;
    }

<div id="container" class="container">Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br /></div>

<input type="button" onclick="expand()" value="Expand" />
<input type="button" onclick="shrink()" value="Shrink" />

When I click the "Shrink" button, the container instantly goes to 0px height.
Since the property "maxHeight" isnot set yet, the animation hasnt both start/end parameters to perform the transition.
After I click either button, the animation runs normally.

I can bypass this issue presetting the property if itsnot set yet, but I need to use setTimeout and lambda functions, what is way overcomplicated to the simplicity I’m looking for.

Also, I cannot add the style=’maxheight=xxx’ property on each element because this function manages elements on thirth party code, wich I cannot alter.

So, how can I properly perform this animation?

>Solution :

You can force a reflow right after you set the initial value, and right before you trigger the change:

var c = document.getElementById('container');

function expand() {
  c.style.maxHeight = ~~(Math.random() * 50 + 50) + 'px'; // it can be any value
}

function shrink() {
  c.style.maxHeight = c.offsetHeight + "px";
  c.offsetHeight; // force reflow
  c.style.maxHeight = '0px';
}

.container {
  transition: max-height 1s ease;
  border: 1px solid #000;
  overflow: auto;
  resize: both;
}

<div id="container" class="container">Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br /></div>

<input type="button" onclick="expand()" value="Expand" />
<input type="button" onclick="shrink()" value="Shrink" />