ScrollReveal() 有一些问题

Question

所以我正在尝试为这家当地餐馆制作一个网站，现在我正在为 nav ul（菜单）制作拉出动画。以前，我刚刚添加了一些 scrollReveal 动画来为导航栏按钮和介绍消息设置动画。它工作正常......那是我开始处理拉出菜单的时候，当我完成时我注意到导航栏的 scrollReveal 动画不起作用。介绍信息的动画效果很好？？我将我的代码粘贴到 codePen 中，它在那里工作，但不在这里，也不在我的 sublime 编辑器中，有什么想法吗？

window.sr = ScrollReveal();
  sr.reveal('.b1', {
   duration: 2000,
   origin: 'top',
   distance: '80px'
  });
  window.sr = ScrollReveal();
  sr.reveal('.b2', {
   duration: 1500,
   origin: 'top',
   distance: '80px'
  });
  window.sr = ScrollReveal();
  sr.reveal('.b3', {
   duration: 1000,
   origin: 'top',
   distance: '80px'
  });
  window.sr = ScrollReveal();
  sr.reveal('.w1', {
   duration: 3000,
   origin: 'right',
   distance: '200px'
  });
  window.sr = ScrollReveal();
  sr.reveal('.w2', {
   duration: 3500,
   origin: 'right',
   distance: '150px'
  });
  window.sr = ScrollReveal();
  sr.reveal('.w3', {
   duration: 4000,
   origin: 'right',
   distance: '150px'
  });

html, body {
 margin: 0;
 padding: 0;
}

/*.side-menu {
 position: fixed;
 top: 134.5px;
 background-color: white;
 width: 299.5px;
 padding: 10px;
 transition: all 2s ease;
 left: -330px;
}

.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;
 transition: all 2s ease;
}

.b1 {
 background-color: lightgreen;
}

.b2 {
 background-color: white;
}

.b3 {
 background-color: #ff4d4d;
}

/*.b1-animate {
 position: relative;
 background-color: lightgreen;
 left: 157px;
 top: 41px;
 border-radius: 0;
 width: 100px;
}

.b2-animate {
 background-color: white;
 position: relative;
 left: 35px;
 top: 21px;
 border-radius: 0;
 width: 122px;
 height: 7.5px;
}

.b3-animate {
 position: relative;
 background-color: #ff4d4d;
 right: 65px;
 border-radius: 0;
 width: 100px;
}*/

.intro {
 background-image: url("img/mex-9.jpg");
 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;
 margin-bottom: 300px;
 font-family: 'Cedarville Cursive';
 font-size: 2.5rem;
 padding: 30px;
}

.about-us {
 margin-top: 0;
 background-color: lightgrey;
}

<!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=Ubuntu" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
</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>About Us</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam itaque aperiam porro temporibus saepe pariatur ad, asperiores cumque recusandae provident aliquam nulla, ex, explicabo eos suscipit culpa sapiente nesciunt quas!</p>
  </div> 
 </section>
 <script src="https://unpkg.com/scrollreveal"></script>
 <script src = "script.js"></script>
</body>
</html>

Answer 1

从您的 .b1、.b2 和 .b3 CSS 中删除 "transition: all 2s ease;"。它正在干扰 scrollreveal 库。

ScrollReveal() 有一些问题

ScrollReveal() is having some problems

html

javascript

css

scrollreveal.js