Some issues with x-collapse

[dfallman]

Really like x-collapse, but having some issues with it (some of these might be known)

Sometimes seems to cause a visual bug when on a div with a lot of things going on

If I'm using it (with Tailwind) on a busy div like this:
<div x-show="isVisible" x-collapse class="flex border rounded align-baseline justify-between text-gray-500 border-gray-300 shadow...">

This produces a visual rendering bug which seems to be a 1-2px background or border or part of the shadow (not sure which, can investigate. Could potentially be a Tailwind issue but seems strange)

However, if I rewrite this as:
<div x-show="isVisible" x-collapse><div class="flex border rounded align-baseline justify-between text-gray-500 border-gray-300 shadow...">

then the issue is gone.

Doesn't seem to work after a template x-if

Understand x-collapse only works on divs with x-show, but sometimes, esp for heavy pages, you just don't want to have everything in the DOM and you'd want to use templates instead of x-show. If I try to get around this and do something like this:

<template x-if="isVisible">
   <div x-show="isVisible" x-collapse>
     ....

...that is neither exactly elegant, nor does it actually work :)

[SimoTod]

The first point could be a browser thing that it might not animate the shadow correctly.

The second point it's because collapse only works when the visibility changes: Your component uses with x-if the same condition of x-show so the visibility never changes, it's either inserted as visible or removed before x-collapse can triggers the animation. Like with transitions, I believe x-collapse won't play nicely with x-if. Note, this is by design.