javascript - 如何防止侧边栏在页面加载时显示瞬间?
问题描述
使用 Alpine.js + TailwindCSS。
每当页面重新加载时,侧边栏会显示自己一瞬间然后关闭。我不知道为什么会这样。
我什至尝试将block
类添加到<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>
解决方案
将“x-cloak”添加到代码的第三行,然后在 css 文件中添加以下内容:
[x-斗篷] {显示:无;}
这应该修复错误
推荐阅读
- java - 如何编写一个java for循环来加载给定一组id和值列表的地图
- javascript - 为什么这段代码不起作用?我正在创建一个 Firefox 扩展,但代码没有运行。但是,如果我将代码粘贴到控制台中,它就可以工作
- angular - 如何在jspdf中对齐图像
- javascript - Img 项目符号出现在 React.js 段落的上方
- python - 使用列表在循环中引用列
- mongodb - 在strapi中创建记录时如何设置随机ID?
- javascript - 使用时刻将服务器的默认时区转换为本地用户时间?
- java - Java Varargs:在数组中查找数字的索引
- php - 将 curl php 响应转换为 xml
- python - 使用 dnspython 传输区域文件的问题