如何在页面加载时隐藏闪烁的对话框内容？

Question

在 tailwindcss、Alpinejs 页面上，我使用通过单击按钮打开的模态。问题是在加载页面时我看到闪烁的对话框内容。我试图将 hidden class 设置为 modal window 并在 init 方法的末尾将 isPageLoaded 变量设置为 true

<div class="overflow-auto border-2 border-grey-900" x-data="app()" x-init="appInit()">

    <div class="w-full h-full">
        <button
            type="button"
            class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
            @click="showModal = true"
        >Open modal
        </button>
    </div>
    <!--Overlay-->

    <div class="overflow-auto w-full h-full hidden" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal, 'visible' : isPageLoaded }">

...
<script>

    function app() {
        return {
            showModal : false,
            isPageLoaded : false,

            appInit: function () {
                console.log('appInit::')
                this.isPageLoaded= true
            },

        }
    }

</script>

因此，我没有看到闪烁的对话框内容，但我无法显示对话框模式，我尝试将其设置为：

'visible' : isPageLoaded

我的意思是切换隐藏 class 我默认设置。但那是行不通的。

请检查一下笔： https://codepen.io/petrogromovo/pen/yLMNVLr

提前致谢！

Answer 1

使用 x-cloak 隐藏元素，直到 Alpine 完全加载。 https://github.com/alpinejs/alpine#x-cloak

将 x-cloak 属性添加到您要隐藏的任何元素，并将此规则添加到您的样式表。

[x-cloak] { display: none; }

如何在页面加载时隐藏闪烁的对话框内容？

How to hide flashing dialog content when page is loading?

tailwind-css

alpine.js