How to animate after update?

#1

How is the best way to animate a component (fadeOut - fadeIn) while the data is updating?
It was possible before but it seems that the new version doesn’t have that, some people say “use Alpinejs”, but how?

#2

Hey, @elfeffe

You can take a look at how JetStream “Saved” status works.
For example:

After Model update fire an event like this

...
public fucntion update()
{
    // model update
    $this->emit('updated');
}
...

And in your blade you can do the following:

<div x-data="{ shown: true }"
    x-init="@this.on('updated', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
    x-show.transition.opacity.out.duration.1500ms="shown">
    <!-- your data -->
</div>

P.S: In this example the animated div will be hidden after firing the event, If you want to do something else, I highly recommend taking a look at Alpine documentation

1 Like
#3

The event should be the same in both cases, right?

#4

The name, yes. It should

If you fire an event called saved it should the listener listen on saved event to happen and so on.

P.S: Sorry my friend I don’t notice that the event called updated and the listener called saved :smile:

#5

hahaha, no problem, I just wanted to be sure.
Ok, thank you

#6

You are very welcome mate.

I hope my answer solved your problem.