如何防止侧边栏在页面加载时瞬间显示？

Question

使用 Alpine.js + TailwindCSS。

每当页面重新加载时，边栏都会显示一瞬间然后关闭。我不知道为什么会这样。

我什至尝试将 block class 添加到 <aside> 元素，然后在边栏打开时显示它，如下所示： :class="open ? 'translate-x-0 block' : '-translate-x-full'" 但那没有要么工作

这是它的样子：

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <nav x-data="{ open: false, toggle() { this.open = ! this.open } }" class="flex w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10">
        <div class="flex flex-row-reverse items-center">
            <button @click="toggle(open)" class="mr-2" aria-label="Open Menu">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8">
                    <path d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <transition enter-class="opacity-0" enter-active-class="ease-out transition-medium" enter-to-class="opacity-100" leave-class="opacity-100" leave-active-class="ease-out transition-medium" leave-to-class="opacity-0">
            <div x-show="open" class="z-10 fixed inset-0 transition-opacity">
                <div @click="toggle()" class="absolute inset-0 bg-black opacity-50" tabindex="0"></div>
            </div>
        </transition>
        <aside class="transform top-0 left-0 w-64 bg-white fixed h-full overflow-auto ease-in-out transition-all duration-300 z-30" :class="open ? 'translate-x-0' : '-translate-x-full'">
            <div class="flex">
                <span class="flex w-full items-center p-4 border-b">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                    </svg>
                </span>

                <span class="flex w-full items-center p-4 border-b">
                    <svg @click="toggle()" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="cursor: pointer;">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </span>
            </div>
            <span class="flex items-center p-4 hover:bg-indigo-500 hover:text-white "><span class="mr-2">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
                        <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                </span>
                <span>Home</span></span>
        </aside>
    </nav>

Answer 1

Alpine 似乎有这个已知问题。来自官方文档：

Sometimes, when you're using AlpineJS for a part of your template, there is a "blip" where you might see your uninitialized template after the page loads, but before Alpine loads.

来源：cloak - Alpine.js

所以解决方法是添加一个全局样式：[x-cloak] { display: none !important; } 然后为每个“blips”的元素添加 x-cloak 指令

Answer 2

将“x-cloak”添加到代码的第三行，然后在 css 文件中添加以下内容：

[x-斗篷]{显示:none;}

这应该可以修复错误

如何防止侧边栏在页面加载时瞬间显示？

How to prevent the sidebar from displaying for split second on page load?

html

javascript

css

alpine.js