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

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; }