动画（可能是切换类）不起作用 [英] Animation (toggle class possibly) not working
问题描述
所以我正在建立一个网站，我有几个div，当用户点击特定按钮或导航项时，应该从右，左或顶部滑动。但是，这些都不起作用。当我点击应该让它们滑动的按钮时，没有任何div会滑过。我正在使用纯JavaScript来执行这些操作。到目前为止，我已经尝试了几个动作。首先，我认为这是因为我没有window.onload，但在添加之后，没有任何改变。然后我可能链接仍然是默认操作，所以我试图添加e.preventDefault希望是问题，它也没有用。然后我发现一些奇怪的东西让我觉得可能是我的电脑没有正确解释javascript（奇怪的想法，我知道。但我只是在考虑任何事情，因为我用完了解决方案）。但实际上，事实证明我的计算机或编辑器没有在javascript中读取文档或窗口。它说它们都没有定义，这很奇怪，因为我已经在正文的末尾正确链接了javascript文件。所以我决定在JSFiddle上运行它来检查它是否真的只是我的电脑。但是，即使在JSFiddle中，当我点击按钮使它们滑动时，div仍然不会滑动。
So I'm making a website where I have several divs that should slide either from right, left, or top when user clicks on specific button or nav items. However, none of those are working. None of the divs will slide over when I click on the button that are supposed to make them slide. I'm using pure javascript to perform those actions. So far, I've tried several actions. First, I thought it was because I didn't have window.onload, but after adding it, nothing changed. Then I though maybe the links were still carrying the default actions, so I tried to add e.preventDefault in hopes that was the problem, it also didn't work. Then I found out something weird that made think maybe it is my computer that is not interpreting javascript correctly(weird thought, I know. But I was just considering anything since I was running out of solutions).But actually, it turns out that my computer or the editor is not reading "document" or window in javascript. It says both of them are not defined, which is weird since I have linked the javascript file correctly at the end of the body. So I decided to run it on JSFiddle to check whether it was really just my computer. However, even in JSFiddle the divs still won't slide when I click the button to make them slide.
我没有想法。由于我正在做的项目很大，我提取了不滑动的div的部分以使事情变得更容易。当我们点击相同的div时，你们看到的div应该从左边滑动。
I'm out of ideas. Since the project I'm doing is big, I extracted the part of divs that are not sliding to make things easier. The div you guys will see, is supposed to slide from the left when we click on the same div.
这是html代码：
<!DOCTYPE>
<html>
<head>
<title>Emanuel Inacio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="home-page">
<div id="nav-bar"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这是css代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
.active {
transform: translateX(50%);
}
最后，这是javascript部分：
Finally, this is the javascript part:
var nav = document.getElementById("nav-bar");
window.onload = function () {
nav.addEventListener("click", function () {
nav.classList.toggle("active");
});
}
其他每个不工作的div都具有与此相同的代码库一。因此我决定只发布这个div。提前致谢！
Every other div that is not working has pretty much the same code base as this one. Hence I decided to post only this div. Thanks in advance!
推荐答案
这是特殊性问题，ID比类更具体，所以你的风格永远不会被应用。您需要像这样调整CSS：
It's a specificity issue, ID is more specific than class so your style will never be applied. You need to adjust CSS like this:
var nav = document.getElementById("nav-bar");
window.onload = function() {
nav.addEventListener("click", function() {
nav.classList.toggle("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
#nav-bar.active {
transform: translateX(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home-page">
<div id="nav-bar"></div>
</div>
这篇关于动画（可能是切换类）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
