How to have transition working with dynamic list on Livewire
If you have tried to use wire:transition in a loop in Livewire, you may have seen some weird behaiour. It's because of limitation recently documented on Livewire. But no worries, I have a workaround for you!
The solution is simple, we are gonna use AutoAnimate.js and to be more precise alpine-auto-animate wich is a Alpine.js wrapper.
Installation
The easiest way is to use the cdn to install the library
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-auto-animate@latest/dist/alpine-auto-animate.min.js" defer></script>But I didn't go the easy way, I prefer to package all in my own project. So we will have to follow Livewire documentation on manually bundling Livewire and Alpine, then add alpine auto animate plugin.
Your app.js will now import Livewire and Alpine manually so you can add one or more plugins before Livewire start.
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';import AutoAnimate from '@marcreichel/alpine-auto-animate'; Alpine.plugin(AutoAnimate); Livewire.start()And your blade layout should include two new blade tags
<html><head> @livewireStyles @vite(['resources/js/app.js'])</head><body> {{ $slot }} @livewireScriptConfig </body></html>Using auto animate with Livewire
So before, you probably tried something like that
<ul> @foreach($list as $model) <li wire:key="{{ $model->id }}" wire:transition.duration.175ms> {{ $model->name }} </li> @endforeach</ul>Remove wire:transition from the loop and add x-auto-animate attribute to the parent.
<ul x-auto-animate.175ms> @foreach($list as $model) <li wire:key="{{ $model->id }}"> {{ $model->name }} </li> @endforeach</ul>Full documentation on how to cusotmize annimations on Github.
And voilà!
Syntax highlighting provided by torchlight.dev