Transitioning when an HTMZ request is made

[wylited]

A new handler

function handleHtmzTransition(iframe) {
  setTimeout(() => {
    const targetEl = document.querySelector(iframe.contentWindow.location.hash || null);
    if (!targetEl) return;

    const currentHeight = targetEl.scrollHeight;
    targetEl.style.maxHeight = currentHeight + 'px';
    
    void targetEl.offsetHeight;
    
    targetEl.style.maxHeight = '0px';
    targetEl.classList.add('transitioning');

    setTimeout(() => {
        targetEl.replaceWith(...iframe.contentDocument.body.childNodes);
        
        const newEl = document.querySelector(iframe.contentWindow.location.hash);
        if (!newEl) return;
        
        newEl.style.maxHeight = '0px';
        newEl.classList.add('transitioning');
        
        void newEl.offsetHeight;
        
        const finalHeight = newEl.scrollHeight;
        newEl.style.maxHeight = finalHeight + 'px';
        
        setTimeout(() => {
            newEl.classList.remove('transitioning');
            newEl.style.maxHeight = '';
        }, 500);
    }, 500);
  });
}

And you can simply set the css of the element you switch on for example

fieldset#content {
  transition: max-height 0.5s ease-out;
  overflow: hidden;
  will-change: max-height;
  @apply pb-2;
}

fieldset#content.transitioning {
  transition: max-height 0.5s ease-in;
}

You can visit my website, to see how it looks.

I'm curious if there is a way to set it to close first while the content is still loading and open as soon as the content is received. Do let me know!