How to make a fadeout action in a toast component?

[potent phoenix]

I have the toast div below that make a success notification that hide after 8 seconds. The time doesn't matter. It's a changeable thing. So my point is: Can i have a better way to fade out this div without a java script? It's not fading yet.

@if($successToast) <!-- if a toast variable is true
It's load a div that will polled by a Livewire after 8 seconds or what a time you want to.
the wire:pool is the hint.
The $toggle helper function do the rest. -->

<div id="toast-success" class="motion-safe:animate-bounse toast_sucess" role="alert" wire:poll.8000ms="$toggle('successToast')" wire:poll.visible>
  <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Check icon</span>
  </div>

  <div class="ml-3 text-sm font-normal">Item atualizado com sucesso.</div>
  
  <button type="button" wire:click="$toggle('successToast')" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
      <span class="sr-only">Close</span>X      </button>
</div>

@endif

[little mortar]

I think alpine or plain JavaScript is just fine. Having js handle some things is a good thing imo. It doesn’t have to be complicated

That way you don’t have to poll the backend like your example. Those additional requests aren’t free. Think about scalability & max nginx connections when you have a lot of traffic

There are a couple of screencasts that cover how to do this in depth

https://laravel-livewire.com/screencasts/s2-toaster-notifications

https://laravel-livewire.com/screencasts/s8-toasters

Otherwise if the frontend has to react to a change that is initiated by the backend (not using polling) you might want to check out Laravel echo.

Hope this helps!

[potent phoenix]

Thank you Willem! I really appreciate your help. But this screencasts are to sponsors, and I can't do it yet. Your thoughts about performance is very very true. I just wanna make a animation to fade out the toast msg without a Alpine or other Javascript, because I don't know yet. I'll learn it.

[night narwhal]

try making a new component for notifications only and then emit to it event 🤔

[uneven lance]

@potent phoenix I use: https://github.com/tony98ms/livewire-notification for notifications. I have as @night narwhal suggested a component that listenes for a event to fire one, and also use echo with livewire to listen vor events of the application, then inside that component use the package to send the actual notification, its customisable and handles the fadeout for you.