在制作汉堡菜单切换动画时，我注意到我的背景在动画播放时正在移动。 任何想法可能是什么原因？
代码:
<head>
<style>
body {
background-color: #222;
height: 100vh;
}
.nav-toggle {
position: absolute;
left: 50%;
top: 50%;
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
cursor: pointer;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: "";
border-radius: 2px;
transition: all .5s ease-in-out;
}
.nav-toggle span:before {
top: -10px;
}
.nav-toggle span:after {
top: 10px;
}
.nav-toggle.active span {
background-color: transparent;
}
.nav-toggle.active span:before, .nav-toggle.active span:after {
top: 0;
}
.nav-toggle.active span:before {
transform: rotate(45deg);
}
.nav-toggle.active span:after {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<a class="nav-toggle" href="#"><span></span></a>
</body>
最佳答案
当用户点击带有 href="#"的 标签时，浏览器的默认行为是滚动到页面顶部。
为防止这种情况，请将 preventDefault 添加到打开汉堡菜单的回调函数中:
document.querySelector(".nav-toggle").addEventListener("click", function(event) {
event.preventDefault();
this.classList.toggle("active");
});
关于javascript - 动画中的跳跃元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42887183/