How can I auto-hide a flash message in Alpine.js? (Say I want it to disappear after 4 seconds)
<div class="flex mx-auto justify-between left-0 bottom-0 z-40">
<div class="flex mr-6 fixed left-8 bottom-8 overflow-hidden">
<div class="bg-white rounded-lg border-gray-300 border p-4 shadow-xl">
<div class="flex flex-row">
<div class="mx-2">
<svg width="24" height="24" viewBox="0 0 1792 1792" fill="#44C997" xmlns="http://www.w3.org/2000/svg">
<path d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
</svg>
</div>
<div class="pl-2 pr-6 max-w-lg">
<span class="font-semibold">Successfully Saved!</span>
<span class="block text-gray-500">Anyone with a link can now view this file</span>
</div>
</div>
</div>
</div>
</div>
You could use x-init to add setTimeout function that will change the value of show after a specified time like this
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)">
<h1>Welcome from alert</h1>
</div>