Transition inside x-for are not working

[mpiorowski]

The toasts are showing, closing, everything is perfect, just no animation. No matter what I put inside x-transition. Any help?

<div
		aria-live="assertive"
		class="z-50 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
		x-data="{
                    toasts: [],
                    addToast(toast) {
                        this.toasts.push(toast);
                        setTimeout(() => {
                            window.dispatchEvent(new CustomEvent('remove-toast', { detail: toast.id }));
                        }, 5000);
                    }
                }"
		x-on:add-toast.window="addToast($event.detail)"
		x-on:remove-toast.window="toasts = toasts.filter(t => t.id !== $event.detail)"
	>
		<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
			<template
				x-for="toast of toasts"
				:key="toast.id"
			>
				<div
					class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white ring-1 shadow-lg z-50 ring-black/5"
					x-show="toasts.find(t => t.id === toast.id)"
					x-transition:enter="transition ease-out duration-300"
					x-transition:enter-start="opacity-0 scale-90"
					x-transition:enter-end="opacity-100 scale-100"
					x-transition:leave="transition ease-in duration-300"
					x-transition:leave-start="opacity-100 scale-100"
					x-transition:leave-end="opacity-0 scale-90"
				>
					<div
						class="p-4"
					>
						<div class="flex items-start">
							<div class="shrink-0">
								<svg
									x-show="toast.type === 'success'"
									class="size-6 text-green-400"
									fill="none"
									viewBox="0 0 24 24"
									stroke-width="1.5"
									stroke="currentColor"
									aria-hidden="true"
									data-slot="icon"
								>
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
								</svg>
								<svg
									x-show="toast.type === 'error'"
									class="size-6 text-red-600"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
									class="icon icon-tabler icons-tabler-outline icon-tabler-exclamation-circle"
								>
									<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 9v4"></path><path d="M12 16v.01"></path>
								</svg>
							</div>
							<div class="ml-3 w-0 flex-1 pt-0.5">
								<p class="text-sm font-medium text-gray-900" x-text="toast.title"></p>
								<p class="mt-1 text-sm text-gray-500" x-text="toast.message"></p>
							</div>
							<div class="ml-4 flex shrink-0">
								<button
									x-on:click="toasts = toasts.filter(t => t.id !== toast.id)"
									type="button"
									class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
								>
									<span class="sr-only">Close</span>
									<svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
										<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"></path>
									</svg>
								</button>
							</div>
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>

[ekwoka]

You can use starting styles and discrete animation for newer browsers if that's acceptable.

Otherwise you need the x-show to be a false value that you set to true after $nextTick

Similarly setting to false well before removing it from the list.

[ekwoka]

I do have a package I've worked on but not published to help improve toasts

https://github.com/ekwoka/awesome-alpine/tree/main/packages%2Ftoasts

Not installable yet and docs are incomplete

https://awesomealpine.com/docs/toasts/1-quick-start/

[mpiorowski]

@ekwoka thank you, will check it out :)

[mpiorowski]

@ekwoka nextTick worked perfectly! Thank you :) Will try to add maybe this section to docs.