Waiting for next event cycle/DOM state change from JS interop in MAUI Blazor

[WesThompson]

I am creating a MAUI Blazor app alongside a Blazor WASM app and keeping as much code in a shared RCL as possible. I am having trouble getting an animation to run properly. Basically I am opening and closing a nav menu with a height transition: transition: height .3s ease;. I am also using JS interop to set the height of the element because it is not a static height so I need to calculate the height of the element when opening and closing because height transitions do not work with height: auto;.

My starting CSS looks like this, as the menu starts in a closed state:

#nav-menu {
    display: none;
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

When the menu button is clicked I call a JS interop method to set the display to block and calculate the height and set it on the element so the height transition runs smoothly from 0 to the required height:

const expandMenu = (div: HTMLDivElement): void => {
    div.style.display = "block";

    // Wait here so the DOM has time to render the new display value
    window.requestAnimationFrame(() => {
        let height: number = getTotalHeight(div); // Function that calculates height of div from its children
        div.style.height = `${height}px`;
    });
}

I have an event listener for when the transition ends to then set the height to auto when it is open so that it can resize with its children, or remove the display style so it sets back to none (defined in the CSS):

document.addEventListener("transitionend", (e: TransitionEvent) => {
    if (e.propertyName === "height") {
        let element:HTMLElement = <HTMLElement>e.target;
        
        if (element.clientHeight === 0) element.style.removeProperty("display");
        else element.style.height = "auto";
    }
});

The problem comes from the method call to close the menu. I am doing a similar thing where I calculate the current height of the menu in order to start the animation from there, and then remove the height style so that it gets set back to 0 (defined in the CSS):

const collapseMenu = (div: HTMLDivElement): void => {
    let height: number = getTotalHeight(div);
    div.style.height = `${height}px`;

    // Wait here so DOM has time to render the static height value
    // **Not Working**
    window.requestAnimationFrame(() => {
        div.style.removeProperty("height");
    });
}

The requestAnimationFrame does not seem to be working the same way here in MAUI. Everything works fine in the WASM but in MAUI the menu just snaps closed and does not apply the transition. I get the same results when using setTimeout(..., 0). It seems to be working fine if I set a longer timeout (which is not a good solution) or if I nest another requestAnimationFrame() like this:

window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
        div.style.removeProperty("height");
    });
});

However, that feels ugly. I imagine it has something to do with event cycles different between the two application types or the time it takes for the DOM to be rerendered because it seems to be removing the height property before it gets a chance to set it so it basically just skips the animation. But like I said, it works fine in Blazor WASM without any weird tricks like calling requestAnimationFrame() twice.

Any insight would be appreciated.

[WesThompson]

Figured out why it is like that right after I posted this but can't seem to delete this post. Anyway, setting the height and removing the height were being applied at the same time because the callback of the requestAnimationFrame() method is set to run before the next repaint. That's why I need to wait two frames, so it will set the height in the first and remove it in the second. I'm still guessing this is not an issue in the WASM app because of the difference in event cycles for each of them or innate features of running in a real browser. So anyway, I guess calling it twice is the correct solution.