Enhancement: hooks for AlpineJS animation

[Rocketpilot]

This is a pretty low priority request but I was wondering if (and if it's not already possible) there could be a way to attach AlpineJS animation events like x-transition to the creation and removal of error messages. I think that would make this a very complete validation solution in the Alpine space.

If that's already possible, sorry, I am not an advanced javascript guy!

[Rocketpilot]

I should add I've got something roughly working by adding/removing TailwindCSS classes but it feels slightly wrong...

[colinaut]

The plugin uses vanillaJS for the span.error-msg display rather than Alpine x-show. The reason I am using hidden attribute is that it allows you do your own thing. You can accomplish Alpine style transitions pretty easily with just css:

[hidden] {
    visbility: hidden;
    opacity: 0;
    transform: scale(0);
}
.error-msg {
    font-size: 0.8rem;
    font-weight: 700;
    color: darkred;
    transition: all 500ms;
    display: block;
}
.error-msg:not([hidden]) {
    visbility: visible;
}

Or tailwind (this should work but I didn't try it):

[hidden] {
  @apply scale-0 opacity-0 invisible;
}
.error-msg {
  @apply text-sm font-bold text-red-800 transition-all duration-500;
}
.error-msg:not([hidden]) {
  @apply visible;
}

Since you can add your own span.error-msg and the plugin will use that, I'm sure there would be a funky way to use x-show directly on the error element but honestly css is the way to go.

[Rocketpilot]

That looks good - thank you for the documentation and explaining your reasoning. (I'm right on this as I'm implementing things in a test branch of an app I'm working on right now)