英文:
What is wrong with this @keyframes thing in JavaScript
问题
I have this single page HTML and I'm practicing some navBar animation with CSS and JavaScript. I wrote @keyframes in CSS and I'm trying to use it in an event listener in JavaScript but it doesn't work at all.
英文:
I have this single page HTML and I'm practicing some navBar animation with CSS and JavaScript. I wrote @keyframes in CSS and I'm trying to use it in a event listener in JavaScript but it doesn't work at all.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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-active')
navLinks.forEach((link, index) => {
console.log(link)
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forward ${index / 7 + 2.5}s`
}
})
})
}
navSlide()
<!-- language: lang-css -->
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
}
.logo {
color: wheat;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links a {
color: wheat;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.nav-links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 2px;
background-color: wheat;
margin: 5px;
}
@media screen and (max-width: 1400px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #5d4954;
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-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<!-- language: lang-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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>NAVIGATION</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</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Projects</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./script.js"></script>
</body>
</html>
<!-- end snippet -->
Sorry! I'm too new here and I don't know how to beautify my text
wrote @keyframes in CSS, won't work in JavaScript
答案1
得分: 0
将这部分内容翻译成中文如下：
添加到CSS中的代码：
.fade {
animation-name: navLinkFade;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
并且像这样使用：
navLinks.forEach((link, index) => {
link.style['animation-delay'] = `${index / 7 + 2.5}s`
link.classList.toggle('fade')
})
英文:
add this to CSS
.fade {
animation-name: navLinkFade;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
and use like this
navLinks.forEach((link, index) => {
link.style['animation-delay'] = `${index / 7 + 2.5}s`
link.classList.toggle('fade')
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论