alpinejs 问题 x-cloak

Question

我在我的项目中使用了 TailwindCSS 和 AlpineJS，当加载登录页面时，header 下拉菜单会短暂打开。为此，我尝试使用 x-cloak，但它无法正常工作，我不明白为什么，因为我在其他页面上使用它并且效果很好。

这是我的代码片段：

    <!-- Header -->
<nav x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" class="bg-blue-800 shadow-xs">
    <div class="max-w-full px-4 lg:px-6">
        <div class="flex justify-between h-16">

            <!-- Mobile menu button -->

            <!-- Left Side -->
            <div class="flex flex-row">
                <!-- Logo -->
                <a class="flex items-center justify-center mr-12" href="#">
                    <img class="hidden w-auto h-10 lg:block" src="/img/logo/angel-white-lg.png" alt="Angel Logo">
                    <img class="block w-auto h-10 lg:hidden" src="/img/logo/angel-white-sm.png" alt="Angel Logo">
                </a>
                <!-- Dropdowns -->
                <div class="hidden lg:flex">
                    <!-- Resources -->
                    <div x-cloak @mouseleave="resourcesOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="resourcesOpen">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="resourcesOpen" aria-controls="nav-list" @mouseenter="resourcesOpen = !resourcesOpen" @click.away="resourcesOpen = false">
                            Recursos
                        </button>
                        <div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="resourcesOpen === true" id="nav-list" style="padding-left: 221px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
                            <!--
                                Trade dropdown panel, show/hide based on dropdown state.
                            -->
                            <div class="flex w-screen py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                <div class="flex flex-col">
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Security
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Estrutura de Taxas
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Founding Options
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Staking
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        24/7 Support
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Liquidity
                                    </a>
                                </div>
                                <div class="flex flex-col">
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Margin Trading
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Índices
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Futures
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        OTC
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Account Management
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Cryptowatch
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Prices -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
                            Preços
                        </button>
                    </div>
                    <!-- Learn -->
                    <div x-cloak @mouseleave="learnOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="learnOpen">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="learnOpen" aria-controls="nav-list" @mouseenter="learnOpen = !learnOpen" @click.away="learnOpen = false">
                            Learn
                        </button>
                        <div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="learnOpen === true" id="nav-list" style="padding-left: 386px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
                            <!--
                                Trade dropdown panel, show/hide based on dropdown state.
                            -->
                            <div class="flex py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                <div class="flex flex-col">
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Crypto Guides
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Videos
                                    </a>
                                    <a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
                                        Podcast
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Support -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
                            Support
                        </button>
                    </div>
                    <!-- Futures -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
                            Futures
                        </button>
                    </div>
                    <!-- Institutions -->
                    <div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
                        <button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
                            Institutions
                        </button>
                    </div>
                </div>
            </div>
      </div>
  </div>

<style>
    [x-cloak] {
      display: none;
    }
</style>

这是页面加载时发生的闪烁的屏幕截图。

Answer 1

把x-cloack放在外面的导航栏

<nav 
    x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" 
    class="bg-blue-800 shadow-xs"
    x-cloak
 >

请注意，我将 x-cloak 放在了外部导航上，因此它在 alpine 初始化之前根本不显示导航

alpinejs 问题 x-cloak

Issue with alpinejs' x-cloak

html

javascript

css

tailwind-css

alpine.js