[FEATURE REQUEST] x-transition.height for dynamic element height

[marcotas]

Congratulations for this package! It's super awesome and very very very handy!

Is there a way to animate the height of an element? I tried some options but didn't work, also I didn't find on documentation.

I'd like to suggest 2 new features:

1. Add new x-transition.height to animate the element's height
2. Add animation hooks like in vue transition component: @enter="..." @beforeEnter="..." @afterEnter="..." etc.

This last one would give us much power to customize animations btw.

The last thing I also would like to suggest is to add a directive to use a custom animation object. For example:

<div x-data x-animate-using="myCustomAnimationHook" >...</div>

And you could have this javascript function in a script tag or importing from a "plugin" or "package" to be used with alpinejs.

function myCustomAnimationHook() {
    return {
        enter(element) { 
            const height = element.clientHeight;
            ...
        },
        beforeEnter(element) { ... },
        afterEnter(element) { ... },
        leave(element) { ... },
        beforeLeave(element) { ... },
        afterLeave(element) { ... },
    }
}

The benefits of this approach is that we could export that functionality globally from a package or even through all the app and reuse the same animation for all components.

What do you think? lmk if you think that would be awesome and I'll try to contribute with a PR for it. It would be a challenge for me, but It would be a good experience.