alpinejs-flux/src/utils/parseArray.js

Simplifies the process of applying CSS classes with x-transition as a template and makes them reusable within single attribute.

export default function ( transitions ) {
    const [transition, enterStart, enterEnd, timingsIn = "", timingsOut = ""] = transitions;

    const transitionEnter = `${transition} ${timingsIn}`.trim();
    const transitionLeave = `${transition} ${timingsOut}`.trim();

    return {
        "x-transition:enter": transitionEnter,
        "x-transition:enter-start": enterStart,
        "x-transition:enter-end": enterEnd,
        "x-transition:leave": transitionLeave,
        "x-transition:leave-start": enterEnd,
        "x-transition:leave-end": enterStart,
    }
}