Property changed transition effect

#1

How can I add some transition effect when data model text is updated?
I cannot find an example everywhere.
Thanks

#2

This isn’t a default behavior in livewire but you can accomplish it with Alpine or just some javascript.

<span x-data="{show: false}" x-show.transition.duration.1000ms="show" x-init="setTimeout(() => { show = true })" id="{{ rand() }}">{{ $text }}</span>

This is likely more convoluted than needed but it illustrates the concept of what you need to do to trigger the transition effect. The behavior is toggled on show. There’s a timeout function on x-init to change show and trigger the transition. The timeout function is there to add a tiny delay so that show isn’t set to true before needed. This method does have the side effect of triggering the transition on initial load but you can have show: true upon instantiation and change it on subsequent calls. Note: there is a random id on the span. This is important so that the entire component is swapped out to re-trigger the x-init functionality.

Again, likely too convoluted for something simple but it does accomplish the desired effect.

#3

Hi shortbrownman, Thank you for your reply and explanation !!!
I had to watch Youtube for Alpine and it’s all good now.

1 Like