javascript - Vanilla JS left to right toggle animation
问题描述
I am a newbie to code and I am learning vanilla JS. I created this drawer navigation with a circle that moves from left tor right, but there is an issue. I uploaded the current state here: http://setup.industries/masquarade/
The issue that gets me stuck:
- The first click on the hamburger nav icon doesn't open the drawer and the animation is switched. I suspect the problem to be in the if(open) as the open var doesn't truly capture the toggle state with
open = header.style.width == '0%'
After the initial bug, it works fine. A real head scratcher for me.
If you have other tips for better code, or point out my bad practices, I'd be happy to learn.
--
Edit 1: I have added the full code to this question. I am not sure how I can make the ellipse visible, i linked directly to hosted url.
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.style.width == '0%'
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX('+ width + 'px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: 'translateX('+ width + 'px)' },
{ transform: 'translateX(0px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
header.style.width = "100%";
moveEllipseRight();
} else {
header.style.width = '0%';
moveEllipseLeft();
}
}
// if (open) {
// ellipse.classList.remove("ellipse_left");
// ellipse.classList.add("ellipse_right");
// } else {
// ellipse.classList.remove("ellipse_right");
// ellipse.classList.add("ellipse_left");
// }
// let ellipse = document.getElementById("ellipse");
// let pos = 0;
// let id = setInterval(frame, 5);
// function myMove() {
// console.log('Hello')
// var ellipse = document.getElementById("ellipse");
// var pos = -200;
// var id = setInterval(frame, 1);
// let width = document.body.clientWidth; // - $('#mydiv').width();
//
// function frame() {
// if (pos == width - 200) {
// clearInterval(id);
// } else {
// pos++;
// ellipse.style.left = pos + "px";
// }
// }
// }
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
@media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')"><a href="#">Tickets and pricing </a></li>
<li class="tablinks" onmouseover="openTab(event, 'Location')"><a href="#">Location</a></li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')"><a href="#">Transportation</a></li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')"><a href="#">House rules</a></li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')"><a href="#">Terms and conditions</a></li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')"><a href="#">Contact</a></li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')"><a href="#">Partners</a></li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
<a href="#" class="button white">Buy Tickets</a>
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
<a href="#" class="button white">Buy Tickets</a>
<a href="#" class="button black">More Information</a>
</div>
</div>
</body>
</html>
解决方案
element.style 的值是通过使用 javascript 或内联样式属性设置的,css 不会为您设置值。因此,如果您使用 css 来设置标题宽度的样式,则值header.style.width
最初将是一个空字符串,从而使表达式header.style.width == '0%'
是虚假的。
您可以添加一个console.log(document.getElementById('header').style.width)
来自己检查值。
结果,第一次单击汉堡包时,条件中的 else 块将始终运行。
在您第一次单击汉堡后,document.getElementById('header').style.width
现在正在通过 javascript 进行设置,因此随后的单击将按预期进行。
要解决此问题,您可以使用内联样式属性来设置标题宽度的样式,也可以使用 javascript 获取样式
const headerWidth = getComputedStyle(document.getElementById('header')).width;
const open = headerWidth === '0px' || headerWidth === '0%';
推荐阅读
- android - 滚动视图不滚动android工作室
- javascript - 为什么非英文字母在 HTML 中呈现乱码?
- ios - 你如何改变 UIVisualEffectView 的模糊半径来创建或多或少的模糊?
- c++ - gtkmm:添加不是类字段的小部件
- nearprotocol - 每次函数调用后更新 block_timestamp
- javascript - 自定义路径上的可拖动元素
- swift - 将观察对象的投影值的属性传递给 @Binding
- javascript - 关于在 div 内并排对齐图像和内容
- c++ - 在 webbots 中使用 opencv 时如何解决链接器错误
- scheduler - 最短剩余时间优先 (SRTF) 如何工作?