x-transition can not running when add dom from array

[LittleTom]

When I used $store, add dom from array, can not trigger x-transition:enter and x-transition:end

I must add setTimeout to make dom show or hide, to correct it.

    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <div class="min-h-screen flex justify-center items-center p-3">
        <div class="grid grid-cols-2 gap-4">
            <button x-data @click="$store.toasts.createToast('This is a test toast message.')"
                class="bg-gray-700 border-t-4 border-blue-600 text-white p-3">
                Create Info Test Toast
            </button>
            <button x-data @click="$store.toasts.createToast('This is a test toast message.', 'success')"
                class="bg-gray-700 border-t-4 border-green-600 text-white p-3">
                Create Success Test Toast
            </button>
            <button x-data @click="$store.toasts.createToast('This is a test toast message.', 'warning')"
                class="bg-gray-700 border-t-4 border-yellow-500 text-white p-3">
                Create Warning Test Toast
            </button>
            <button x-data @click="$store.toasts.createToast('This is a test toast message.', 'error')"
                class="bg-gray-700 border-t-4 border-red-600 text-white p-3">
                Create Error Test Toast
            </button>
        </div>
    </div>
    <div x-data class="absolute top-0 right-0 p-4 overflow-x-hidden">
        <template x-for="(toast, index) in $store.toasts.list" :key="toast.id">
            <div x-show="toast.visible" @click="$store.toasts.destroyToast(index)"
                x-transition:enter="transition ease-in duration-200"
                x-transition:enter-start="transform opacity-0 translate-y-2"
                x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-out duration-500"
                x-transition:leave-start="transform translate-x-0 opacity-100"
                x-transition:leave-end="transform translate-x-full opacity-0"
                class="bg-gray-900 bg-gradient-to-r text-white p-3 rounded mb-3 shadow-lg flex items-center"
                :class="{
				'from-blue-500 to-blue-600': toast.type === 'info',
				'from-green-500 to-green-600': toast.type === 'success',
				'from-yellow-400 to-yellow-500': toast.type === 'warning',
				'from-red-500 to-pink-500': toast.type === 'error',
				}">
                <svg x-show="toast.type == 'info'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                        clip-rule="evenodd" />
                </svg>
                <svg x-show="toast.type == 'success'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                        clip-rule="evenodd" />
                </svg>
                <svg x-show="toast.type == 'warning'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                        clip-rule="evenodd" />
                </svg>
                <svg x-show="toast.type == 'error'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                        clip-rule="evenodd" />
                </svg>
                <div x-text="toast.message"></div>
            </div>
        </template>
    </div>
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.store("toasts", {
                counter: 0,
                list: [],
                createToast(message, type = "info") {
                    const index = this.list.length
                    let totalVisible =
                        this.list.filter((toast) => {
                            return toast.visible
                        }).length + 1
                    this.list.push({
                        id: this.counter++,
                        message,
                        type,
                        visible: true,
                    })
                    setTimeout(() => {
                        this.destroyToast(index)
                    }, 2000 * totalVisible)
                },
                destroyToast(index) {
                    this.list[index].visible = false
                },
            })
        })
    </script>
    <script>
        document.addEventListener("alpine:initialized", () => {
            Alpine.store("toasts").createToast(
                "Welcome to this demo!",
                "success"
            )
        })
    </script>

[ekwoka]

This is normal behavior.

The standard way to handle an entrance animation for new elements is to add the following directives:

<div x-data="{ show: false }" x-show="show" x-init="$nextTick(()=>show=true)" x-transition>

If you have the show state on the looped element then you can skip that part and use that prop.

I'm pretty sure this is an acceptable implementation, and that needing it encapsulated in the template duplication is just not necessary. This provides more control for determining how and if the element should even transition in.

You could probably wrap those up into an Alpine.bind for reuse

[LittleTom]

thank you :)