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

Question

在 tailwindcss，Alpinejs 页面上，我使用通过单击按钮打开的模式。 问题是在页面加载时我看到闪烁的对话框内容。 我试图将隐藏类设置为模态窗口并在 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

我的意思是切换我默认设置的隐藏类。但这不起作用。

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

提前致谢！

Answer 1

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

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

[x-cloak] { display: none; }