x-transition.md

X-Splade-Transition Component

The Transition Component allows you to animate elements that should be shown or hidden. It comes with a few default animations, but you can also use custom animations and define presets.

Toggle Example

This example uses the Toggle component to show or hide the Welcome!-message. Instead of using a v-show to toggle the message, you may now use the show attribute:

<x-splade-toggle>
    <button @click.prevent="toggle">Toggle message</button>

    <x-splade-transition show="toggled">
        Welcome!
    </x-splade-transition>
</x-splade-toggle>

CSS Classes

You may use classes to style a transition. While you can use any class you want, here are the links to the Tailwind CSS documentation on Transitions and Transforms.

<x-splade-transition
    show="toggled"
    enter="transition-opacity duration-75"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity duration-150"
    leave-from="opacity-100"
    leave-to="opacity-0"
>
    ...
</x-splade-transition>

Presets

With the Animate Facade, you may define presets, so you don't have to copy the CSS classes across your project.

Animation::new(
    name: 'slide-left',
    enter: 'transform transform ease-in-out duration-300',
    enterFrom: 'opacity-0 -translate-x-full',
    enterTo: 'opacity-100 translate-x-0',
    leave: 'transform transform ease-in-out duration-300',
    leaveFrom: 'opacity-100 translate-x-0',
    leaveTo: 'opacity-0 -translate-x-full',
);

If you add new animations, for example, in the AppServiceProvider class, make sure you add the path to the content section of your tailwind.config.js file. This way, the Tailwind JIT engine knows where to find the classes.

Now you can use the preset in your template:

<x-splade-transition animation="slide-left" show="toggled">
    ...
</x-splade-transition>

Included animations

The included animations are default, opacity, fade, slide-left, and slide-right.