Directive that does something before element shows / hides

[mikestempien]

While the Collapse plugin is great out of the box, I'd like to control transition with CSS. I'm not really familiar with how Alpine works under the hood, but here's what I'm thinking:

Instead of x-collapse having to deal with everything I'd need some directive that would only check for element's scrollHeight before it's being shown/hidden and store it in a custom property ex: --height. I'd use that in conjunction with x-transform class names to transition the height myself, via CSS.

So the question is, how to write a directive that would do something before show / transition class names being applied?

[SimoTod]

All custom directives run after the canonical ones so probably they wouldn't help but you can just use x-init: x-init="$el.style.setProperty('--heigh', $el.offsetHeight+'px')"

[mikestempien]

Yeah, unfortunately, I need to do the calculations just before showing and hiding the element, to make sure that the height is correct at this moment, for a smooth transition (adding content, toggling something inside, bumping font size, resizing the window, etc. may change the height of that element).

[SimoTod]

Good point. It gets a bit more complicated but x-show can be a function that does some calculations and eventually return a boolean. Something like <div x-show="() =>{if (! open $el.style.display=null; $el.style.setProperty('--heigh', $el.offsetHeight+'px'); if(!open) $el.style.display='hidden'; return open}">.

[mikestempien]

Looks like it's working! (just had to un-negate ifs)
Thanks a lot, mate!