¿Cómo puedo ocultar automáticamente un mensaje flash en Alpine.js? (Di que quiero que desaparezca después de 4 segundos)
<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>Puede usar x-init para agregar la función setTimeout que cambiará el valor de show después de un tiempo específico como este
<script src="https://unpkg.com/alpinejs@3.xx/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>