个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有三个文件 index.html、style.css、app.js。
尝试制作响应式布局。
我在 .nav-link li 下的 CSS 文件中将不透明度设置为 0。当我点击汉堡图标文本时，我想制作动画，即 文本的不透明度应从 0 变为 1(检查@keframe navLinkFade)，然后文本将出现。 但这不会发生。为什么？
我已经在 app.js 中正确调用了所有函数，我想请看一下。
当我在 CSS 中将不透明度设置为 1 时，效果很好，但这并没有给我带来淡入淡出的效果。
点击汉堡菜单前的图片:
点击汉堡菜单后的图片
index.html
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-avtive");
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = "";
} else {
link.style.animation = "navLinkFade 0.5s ease forwards ${index / 7}s";
}
});
});
};
navSlide(); * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: "Poppins", sans-serif;
background-color: black;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(240, 172, 0);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
background-color: whitesmoke;
height: 3px;
width: 25px;
margin: 5px;
cursor: pointer;
}
@media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-avtive {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
<script src="app.js"></script>
</body>
</html>
我希望 burgerMenu 使用 navLinkFade 显示文本
最佳答案
.nav-links li opacity: 0 是主要问题。更改不透明度即可。
@media screen and (max-width: 768px)
.nav-links li {
opacity: 1;
}
对于动画，字符串应该用 ES6 ` 包裹起来，而不是双引号。因为双引号内的逻辑计算或变量不起作用。双引号或单引号内 ${index/7} 被视为字符串。
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`
关于javascript - 单击汉堡菜单后看不到我的文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57051880/
25
4
0
抖音开学季完成任务免费领甜筒、汉堡、随机红包等 打开抖音APP 首页搜索【开学季】下拉页面点击活动进去 完成简单任务即可免费领麦当劳甜筒、吉士汉堡、随机红包等! 活动地址：抖音搜索【开学季
我有一个用于桌面 View 的导航栏和用于移动设备的汉堡菜单，我有一个关于汉堡菜单的问题；汉堡菜单的栏覆盖了部分背景图像，我希望背景图像始终位于汉堡菜单之后。这是我的代码
我想改变抽屉导航的汉堡/箭头图标的颜色。我知道我可以在样式中更改它，但我想在 java 中动态更改它。有人知道怎么做吗？ 最佳答案 使用 appcompat-v7:23.0.1 下一个代码对我有用:
我正在使用带有 DrawerLayout 的工具栏。我的工具栏有 2 个 View (按钮)，一个在中间，一个靠近右边距。当我使用 getSupportActionBar().setDisplayHo
我正在练习如何制作一个响应式汉堡菜单，但我在两个功能上遇到了麻烦，我想让它发挥作用。 我在汉堡菜单中使用了一个很棒的字体图标，它不想在屏幕大于 480 像素时消失。我得到那个工作的唯一方法是在图标类上
我有一个“移动汉堡包”引导菜单（引导3）。我想关闭使用代码打开的汉堡菜单。 最佳答案 Bytec0de是正确的：$('elem').collapse('hide'); 关于javascript - b
我确定有人问过这个问题，但我似乎找不到不使用 SASS 的示例。我只有一个正在使用的常规 CSS 文件。我希望汉堡菜单更改为较大尺寸的水平菜单。(@media only screen and (min
很长一段时间以来，我一直在我的网站上使用汉堡菜单，这是一个具有绝对定位的全屏导航覆盖层，其中导航打开是(css)高度= 100％并且关闭=“0％”。它基于本教程:https://www.w3schoo
我是一名优秀的程序员,十分优秀！