AlpineJS页面加载过渡动画失效问题排查

问题核心 #

你的代码里x-init="show = true"会在Alpine初始化时立即执行，此时元素还没完成初始隐藏状态的渲染，没有从false到true的状态变更过程被Alpine捕获，因此过渡动画不会触发，元素直接显示。

解决办法 #

需要确保元素先处于隐藏状态，再触发显示操作，有两种简单的实现方式：

方式一：使用$nextTick #

$nextTick会等待当前DOM渲染周期结束后执行回调，确保元素已经处于隐藏状态后再设置show = true：

<body x-data="container">
    <main x-show="show" x-transition x-init="$nextTick(() => show = true)" class="flex flex-col items-center justify-center w-screen h-screen">
        test
    </main>
</body>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('container', () => ({
            show: false
        }))
    })
</script>

方式二：添加微小延迟 #

用$timeout给状态变更加一个极短的延迟，让元素有时间完成初始隐藏状态的渲染：

<body x-data="container">
    <main x-show="show" x-transition x-init="$timeout(() => show = true, 10)" class="flex flex-col items-center justify-center w-screen h-screen">
        test
    </main>
</body>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('container', () => ({
            show: false
        }))
    })
</script>

额外优化（可选） #

可以给元素加上x-cloak属性，避免Alpine初始化前元素短暂闪现：

<main x-cloak x-show="show" x-transition x-init="$nextTick(() => show = true)" class="flex flex-col items-center justify-center w-screen h-screen">

同时在CSS中添加：

[x-cloak] { display: none !important; }

内容的提问来源于stack exchange，提问作者OhMad