As of August 2024, Splade is no longer actively maintained. Though we will try to keep up with future Laravel and PHP versions, we discourage using Splade in new projects.

After a period of reflection, we've come full circle and decided to bring the magic of Splade back to Inertia, where it all started. Please check out this new chapter in our journey: Inertia UI.

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.