个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试为汉堡按钮制作动画。问题是动画仅适用于第一次单击，并且我不知道如何使第二次单击执行反向动画。我不确定这是否可以在不使用关键帧的情况下完成。诗。 css 中的括号未格式化，因为它是从 scss 编译的。
var hamburger = document.getElementById("hamburger");
var nav_items = document.getElementsByClassName("nav-items")[0];
var line1 = document.getElementsByClassName("line1")[0];
var line2 = document.getElementsByClassName("line2")[0];
var line3 = document.getElementsByClassName("line3")[0];
hamburger.addEventListener("click", function() {
nav_items.classList.toggle("nav-open");
line1.classList.toggle("first-line");
line2.classList.toggle("middle-line-hidden");
line3.classList.toggle("last-line");
});body {
background-color: white;
margin: 0;
padding: 0;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
color: white;
z-index: 100;
background-color: blue;
}
#logo {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
font-size: 25px; }
#logo a {
text-decoration: none;
color: white; }
#logo a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background-color: yellow;
z-index: -1; }
.nav-items {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
justify-content: center;
font-size: 2rem;
background-color: black; }
.nav-items a {
text-decoration: none;
color: white;
margin: 15px 0; }
.nav-items a:first-child {
margin-top: 0; }
.nav-items a:hover {
color: yellow; }
#hamburger {
height: 40px;
width: 40px;
background-color: transparent;
border: 0px solid transparent;
padding: 0;
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
#hamburger .line1,
#hamburger .line2,
#hamburger .line3 {
position: absolute;
left: 0;
height: 5px;
width: 100%;
background-color: white;
border-radius: 25px;
transition: 0.5s linear; }
#hamburger .line1 {
top: 3px; }
#hamburger .line2 {
top: 50%;
transform: translateY(-50%); }
#hamburger .line3 {
bottom: 3px; }
.nav-open {
visibility: visible; }
.middle-line-hidden {
animation: hamburger-mid-line 0s linear;
animation-fill-mode: forwards;
animation-delay: 0.3s; }
.first-line {
animation: hamburger-first-line 0.5s;
animation-fill-mode: forwards; }
.last-line {
animation: hamburger-last-line 0.5s;
animation-fill-mode: forwards; }
@keyframes hamburger-mid-line {
from {
visibility: visible; }
to {
visibility: hidden; } }
@keyframes hamburger-first-line {
0% { }
50% {
top: 50%;
transform: translateY(-50%); }
100% {
top: 42%;
transform: rotate(45deg); } }
@keyframes hamburger-last-line {
0% { }
50% {
bottom: 50%;
transform: translateY(50%); }
100% {
bottom: 45%;
transform: rotate(-45deg); } }<!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" />
<title>Document</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<header id="navbar">
<div class="nav-items">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
</div>
<button id="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</button>
</header>
</body>
</html>最佳答案
最简单的方法是在 CSS 中将动画分配给一个类，例如带有打开动画的 .openedhamburger。
现在创建分配给其他类的其他动画，例如带有关闭动画的.closehamburger。
最后用 javascript 切换分配给元素的类，就这样，每当分配不同的类时，就会触发正确的动画。
编辑:另外，尽管在您的情况下使用两步动画，所以这不适用，请知道使用这种类方法，如果您启用平滑过渡，那么有时您甚至可以这样做它没有任何动画:只需将两种状态下的元素的位置和旋转相关联，然后由于启用了平滑变换，因此将会出现动画。
关于javascript - 汉堡按钮上的反转动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60367091/
25
4
0
如何将“off”指令应用于指定处理程序？ 例如 var $btn = $("#theBtn"); var namedHandler = $btn.on("click", function() { //
我正在尝试使用以下标记设计一个 Breadcrumb 组件； Home Home Users 我正在分离 使用 ::pseu
我在使用以下代码时遇到问题。 import urllib2 import csv from bs4 import BeautifulSoup soup = BeautifulSoup(urllib2.
我是一名优秀的程序员,十分优秀！