Question

window.sr = ScrollReveal();
		sr.reveal('.b1', {
			duration: 2000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.b2', {
			duration: 1500,
			origin: 'top',
			distance: '80px'
		})
		sr.reveal('.b3', {
			duration: 1000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.w1', {
			duration: 3000,
			origin: 'right',
			distance: '200px'
		});
		sr.reveal('.w2', {
			duration: 3500,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.w3', {
			duration: 4000,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.h2-about', {
			duration: 2000,
			origin: 'top',
			distance: '150px'
		});

		const navBtn = document.querySelector('.menu-bars');
		navBtn.addEventListener('click', () => {
			const b1 = document.querySelector('.b1');
			const b2 = document.querySelector('.b2');
			const b3 = document.querySelector('.b3');

			addAnimation(b1);
			addAnimation(b2);
			addAnimation(b3);

			function addAnimation(bar) {
				bar.animationName = bar.className + '-animate';
				alert(bar.animationName);
			}
		});

html, body {
	margin: 0;
	padding: 0;
}

.side-menu {
	position: fixed;
	top: 140px;
	background-color: white;
	width: 299.5px;
	padding: 10px;
	transition: all 2s ease;
	left: -500px;
	opacity: 0.8;
}

.side-menu ul {
	list-style-type: none;
	text-align: center;
}

.side-menu li {
	color: grey;
	font-size: 1.8rem;
	margin: 6px;
	margin-left: -35px;
	margin-bottom: 35px;
	font-family: 'Ubuntu';
}

.side-menu li:hover {
	color: orange;
	cursor: pointer;
}

.menu-bars{
	position: fixed;
	left: 50px;
	top: 80px;
}

.b1, .b2, .b3 {
	width: 60px;
	height: 8px;
	background-color: red;
	margin:.8rem;
	border-radius: 5px;
}

.b1 {
	background-color: lightgreen;
	animation-duration: 1s;
}

.b2 {
	background-color: white;
	animation-duration: 1s;
}

.b3 {
	background-color: #ff4d4d;
	animation-duration: 1s;
}

@keyframes b1-animate {
	from {width: 60px; height: 8px; background-color: lightgreen; margin:.8rem; border-radius: 5px;}
	to {width: 60px; height: 8px; position: relative; left: -50px; top: 41px; width: 100px; border-radius: 0; background-color: lightgreen;}
}

@keyframes b2-animate {
	from {width: 60px;
	height: 8px;
	background-color: white;
	margin:.8rem;
	border-radius: 5px;}
	to {width: 60px;
	height: 8px;
	position: relative;
	left: 35px; 
	top: 33px; 
	width: 150px; 
	height: 8px; 
	border-radius: 0;
	background-color: white;}
}

@keyframes b3-animate {
	from {width: 60px;
	height: 8px;
	background-color: #ff4d4d;;
	margin:.8rem;
	border-radius: 5px;}
	to {width: 60px;
	height: 8px;
	position: relative;
	top: 25px;
	right: -169px; 
	width: 100px; 
	border-radius: 0;
	background-color: #ff4d4d;}
}

.intro {
	background: darkblue;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 0;
}

h1 {
	font-family: 'Cedarville Cursive';
	position: absolute;
	left: 700px;
	top: 50px;
	color: white;
	font-size: 3rem;
}

h2 {
	text-align: center;
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	padding: 30px;
	color: orange;
}

.about-us {
	margin-top: -40px;
	background-color: #014041;
	box-shadow: inset 0px 0px 100px #1a1a1a;
}

p {
	position: relative;
	padding-left: 20px;
	top: -50px;
	border-left: 1px solid white;
	color : white;
	font-size: 1.8rem;
	width: 400px;
	font-family: 'Josefin sans';
	margin-left: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El Metate | Mexican food</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
	<header>
		<nav>
			<div class="side-menu">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Menu</li>
					<li>Contact</li>
					<li>Location</li>
					<li>News</li>
				</ul>
			</div>
			<div class="menu-bars">
				<div class="b1"></div>
				<div class="b2"></div>
				<div class="b3"></div>
			</div>
		</nav>
		<div class="intro">
			<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
		    <img src="" alt="">
		</div>
	</header>
	<section class="about">
		<div class="about-us">
			<h2 class="h2-about">About Us</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
		</div>	
	</section>
	<script src="script.js"></script>
</body>
</html>

大家好，我目前正在一家小型餐厅的网站上工作。我正在研究导航按钮，特别是单击按钮后的状态。看起来就像您会想到典型的汉堡式导航按钮外观。但是，当单击时，我希望它向下变形几个像素并形成一行。发生这种情况时，侧面菜单（ul）隐藏在屏幕的左侧：当条形变为单行时，它将弹出，悬停在拉出的菜单上。

接下来，我创建了一个函数（addAnimation（））我通过了每个导航栏。此函数将在每个栏上添加一个-animationName-。分配给每个小节的动画将并且确实具有它在from（from {property：value;}）中的当前css属性，以及在to（to {property：value;}）中所需的属性。如此，当单击导航按钮时，每个导航栏都会获得其自己的animationName，并且动画应该正确执行？和往常一样，这没有用，我放了一个alert（bar.animationName）;在函数中，这样我可以看到传递的值；是的。但是什么也没有，可能是因为我已经在每个栏中设置了scrollReveal属性。我尝试使用过渡，而不是添加关键帧动画，而是向元素添加了一个新类，同时删除了当前类，但srollReveal不适用于过渡。任何帮助都会很棒。

如何使元素的动画与srollReveal

0 个答案: