文章/答案/技术大牛

发布

社区首页 >问答首页 >顺风与Alpine.js闪烁

问顺风与Alpine.js闪烁
EN

Stack Overflow用户

提问于 2022-03-15 12:14:03

回答 1查看 913关注 0票数 1

如何修复顺风和alpine.js上的闪烁？已经按照alpine.js添加了x斗篷。但还是没修好。

如果页面加载上的x显示的“默认”状态是"false"，那么您可能希望在页面上使用x斗篷来避免“页面闪烁”(当浏览器在阿尔卑斯完成初始化和隐藏内容之前呈现内容时所产生的效果)。您可以在其文档中了解更多关于x斗篷的知识。

style.css (未编译)

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
  display: none !important;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="js/alpine.js" defer></script>
  </head>
  <body class="bg-gray-50 font-sans flex flex-col min-h-screen">
    <header class="sticky top-0 z-50">

      <nav class="bg-white shadow">
        <div x-data="{ isOpen: false }" @click.outside="isOpen = false">
          <div class="container px-6 py-3 mx-auto">
            <div
              class="flex flex-col md:flex-row md:justify-between md:items-center"
            >
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <a
                    class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform lg:text-3xl hover:text-gray-700"
                    href="/"
                  >
                  Logo
                    <!-- <img
                      src="logo.png"
                      alt="logo"
                    /> -->
                  </a>

                  <!-- Search input on desktop screen -->
                  <div class="mx-3 md:mx-10 md:block">
                    <div class="relative">
                      <span
                        x-cloak
                        class="absolute inset-y-0 left-0 flex items-center pl-3"
                      >
                        <svg
                          class="w-5 h-5 text-gray-400"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          ></path>
                        </svg>
                      </span>

                      <input
                        type="text"
                        class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md"
                        placeholder="Search"
                      />
                    </div>
                  </div>
                </div>

                <!-- Mobile menu button -->
                <div class="flex md:hidden" x-cloak>
                  <button
                    type="button"
                    class="text-gray-500 hover:text-gray-600"
                    aria-label="toggle menu"
                    @click="isOpen = !isOpen"
                    x-cloak
                  >
                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                      <path
                        fill-rule="evenodd"
                        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                      ></path>
                    </svg>
                  </button>
                </div>
              </div>

              <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
              <div
                :class="isOpen ? 'block' : 'hidden'"
                class="items-center md:flex"
                x-cloak
              >
                <div
                  class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1"
                  x-cloak
                >
                  <a
                    class="my-1 text-sm leading-5 text-gray-700 hover:text-cyan-700 hover:underline md:mx-4 md:my-0"
                    href="/"
                    >Home</a
                  >
                  <a
                    class="my-1 text-sm leading-5 text-gray-700 hover:text-cyan-700 hover:underline md:mx-4 md:my-0"
                    href="/page"
                    >Page</a
                  >
                </div>

                <div class="flex items-center py-2 -mx-1 md:mx-0" x-cloak>
                  <a
                    class="block w-1/2 px-3 md:px-5 py-2 md:py-3 mx-1 text-sm font-medium leading-5 text-center text-gray-700 transition-colors duration-200 transform rounded md:mx-2 md:w-auto border shadow"
                    href="#"
                    >Login</a
                  >
                  <a
                    class="block w-1/2 px-3 md:px-5 py-2 md:py-3 mx-1 text-sm font-medium leading-5 text-center text-gray-100 transition-colors duration-200 transform bg-cyan-600 rounded hover:bg-cyan-700 md:mx-0 md:w-auto border border-cyan-600 shadow"
                    href="#"
                    >Register</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <main></main>
  </body>
</html>

我甚至试着录下来。

任何帮助都是非常感谢的。

javascript

html

tailwind-css

alpine.js

回答 1

Stack Overflow用户

发布于 2022-05-13 20:38:54

您的style.css包文件有多大？试着滴

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

直接进入您的<head>导入上面的style.css，并查看这是否修复了它。如果这不能修复它，我可能会开始查看devtools Network > CSS 中的CSS包文件的瀑布。如果您的包很大，请记住，它不会阻止对身体中的东西进行渲染。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71482048

复制

相似问题

问顺风与Alpine.js闪烁
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风与Alpine.js闪烁EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顺风与Alpine.js闪烁
EN