在 list-items 上使用翻译时不透明度导致奇怪的行为

Question

const navbar = document.querySelector('.navbar');
let scrolled = false;

window.onscroll = function() {
  if(window.scrollY > 100) {
    navbar.classList.remove('top');
    if(!scrolled) {
      navbar.style.transform = 'translateY(-70px)';
    }
    setTimeout(() => {
      navbar.style.transform = 'translateY(0px)';
      scrolled = true;
    }, 200);
  } else {
    navbar.classList.add('top');
    scrolled = false;
  }
}


const hamMenu = document.querySelector('#ham-menu');
const listItems = document.querySelectorAll('.item-list li');


loadEventListeners();
function loadEventListeners() {
  hamMenu.addEventListener('click', extendMenu);
}


function extendMenu(e) {
  hamMenu.style.transform = 'scale(1.5)';
  setTimeout(() => hamMenu.style.transform = 'scale(1)', 300);
  if(hamMenu.classList.contains('closed')) {
    listItems.forEach(item => {
      item.style.transform = 'translateX(0vw)'
    });
    hamMenu.classList.remove('closed');
  } else {
    listItems.forEach(item => {
      item.style.transform = 'translateX(100vw)'
    });
    hamMenu.classList.add('closed');
  }
}


const message = document.querySelector('#message');
const heightLimit = 200;

message.oninput = function() {
  message.style.height = ""; /* Reset the height*/
  message.style.height = message.scrollHeight + 'px';
}

/* UTILITIES */

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  transition: all 0.15s ease-in-out;
  transform: scale(1.05);
  opacity: 0.85;
}

.btn:active {
  transform: scale(1.1);
}

/* Text */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }

/* Background */
.bg-primary {
  background: var(--primary);
  color: #fff;
}
.bg-secondary {
  background: var(--secondary);
  color: #fff;
}

.bg-light {
  background: var(--light);
  color: #333;
}

.bg-dark {
  background: var(--dark);
  color: #fff;
}

.bg-white {
  background: #fff;
  color: #333;
}

.bg-outline {
  background: transparent;
  color: #fff;
  border: 1px #fff solid;
}

/* Flex Icons */
.flex-icons {
  display: flex;
  justify-content: space-around;
  padding: 3rem;
  width: 100%;
}

.flex-icons .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 1rem 2rem;
}

.flex-icons img {
  width: 20rem;
  border-radius: 50%;
  margin-bottom: 3rem;
}

/* Flex Row */
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-row.flex-reverse {
  flex-direction: row-reverse;
}

.flex-row .column {
  flex-basis: 100%;
  flex: 1;
}

.flex-row img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.flex-row .column .column-1,
.flex-row .column .column-2 {
  height: 100%;
}

.flex-row .column .column-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem;
}

.flex-row .column .column-2 h4 {
  font-weight: bold;
}

.flex-row .column .column-2 h2 {
  font-size: 4rem;
  margin: 1rem 0 2rem;
  font-weight: 300;
}

.flex-row .column .column-2 p {
  margin-bottom: 3rem;
}

/* Flex Grid */

.flex-grid {
  padding: 2rem 2rem 4rem;
}

.flex-grid .row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.flex-grid .row .column {
  flex-basis: 100%;
  padding: 0 0.3rem;
}

.flex-grid .row .column img {
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flex-grid .row .column img:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.flex-grid .grid-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
}

.flex-grid .grid-content h2 {
  font-size: 4rem;
  font-weight: 300;
  margin: 2rem 0 3rem;
}

/* MAIN STYLE */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  /* Colors */
  --primary: #28a745;
  --secondary: #0284d0;
  --light: #f4f4f4;
  --dark: #333;
}

html {
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  font-size: 1.6rem;
  color: #333;
  background: #fff;
}

h1, h2, h3 {
  font-weight: 400;
}

a {
  text-decoration: none;
  color: #333;
}

ul {
  list-style: none;
}

/* Hero */
.hero {
  background: url(../img/showcase.jpg) no-repeat center center/cover;
  height: 100vh;
  position: relative;
  color: #fff;
}

.hero.blog-page {
  height: 30vh;
  background: url(../img/blog/blog-home.jpg) no-repeat center center/cover;
}

.hero.blog-page .content h1 {
  font-size: 4rem;
}


.hero.blog-page .content h1 span {
  font-weight: bold;
  font-style: italic;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.hero * {
  z-index: 1;
}

.hero .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.hero .content h1 {
  font-size: 6.5rem;
  font-weight: 300;
  text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}

.hero .content p {
  font-size: 2.2rem;
  font-weight: 300;
  margin: 1.5rem 0 3rem;
  text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}

/* navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  opacity: 0.8;
  color: #f4f4f4;
  position: fixed;
  top: 0;
  width: 100%;
  height: 7rem;
  padding: 0 3rem;
  transition: all 0.4s ease-in;
}


.navbar.top {
  background: transparent;
}

.navbar a {
  color: #fff;
}

.navbar ul {
  display: flex;
  align-items: center;
}


.navbar ul li a {
  padding: 1rem 2rem;
  margin: 0 0.5rem;
}

.navbar ul li a:hover {
  border-bottom: 2px var(--primary) solid;
}

.navbar .logo {
  transition: all 0.2s ease-in-out;
}

.navbar .logo:hover {
  transform: scale(1.05);
}

.navbar .logo span {
  font-weight: bold;
  font-style: italic;
}

.navbar #ham-menu {
  cursor: pointer;
}

/* Flex Icons */
.flex-icons .box i {
  background: var(--primary);
  color: #fff;
  padding: 1.5rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}

.flex-icons .box h3 {
  margin-bottom: 2rem;
  font-weight: bold;
  font-size: 2rem;
}

/* Team */
#team .flex-icons .box h4 {
  margin-bottom: 1rem;
}

#team .team-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 3rem;
}

#team .team-content h4 {
  font-size: 1.8rem;
}

#team .team-content h2 {
  font-size: 4.5rem;
  font-weight: 300;
  margin: 2rem 0;
}

/* Contact Form */
#contact .contact-form {
  padding: 2rem;
  width: 100%;
}


#contact .contact-form .form-control label {
  display: block;
}

#contact .contact-form .form-control input,
#contact .contact-form textarea {
  width: 100%;
  height: 3.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border: 1px #ddd solid;
  border-radius: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

#contact .contact-form textarea {
  height: 15rem;
  resize: vertical;
  overflow: hidden;
}

#contact .contact-form .form-control input:focus,
#contact .contact-form textarea:focus {
  outline: none;
  border: 1px var(--primary) solid;
}

#contact .contact-form .form-control input::placeholder,
#contact .contact-form textarea::placeholder {
  font-family: 'Roboto', sans-serif;
  opacity: 1;
}

#contact .contact-form button {
  display: inline-block;
}

#contact .column-2 h2 {
  padding-left: 2rem;
}

/* Footer */
.footer {
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer a {
  color: #fff;
  margin: 0 1.5rem;
}


.footer a:hover {
  color: var(--primary);
}

.footer a i {
  transition: 0.2 all ease-in-out;
}

.footer a i:hover {
  transform: scale(1.1);
}

.footer a i:active {
  transform: scale(1.15);
}

.footer p {
  margin-top: 2rem;
}

.footer p span {
  font-style: italic;
  font-weight: bold;
}


/* Post Page */

.post .post-1 {
  padding: 3rem;
}

.post img {
  width: 50rem;
  border-radius: 1rem;
  display: block;
  margin: 3rem auto;
}

.post .post-1 h2 {
  font-size: 4rem;
  font-weight: 300;
  padding-top: 0.5rem;
}

.post .post-1 p {
  margin-bottom: 2rem;
}

/* Extra */
.item-list li {
  /* display: none; */
  transition: all 0.5s ease;
  transform: translateX(100vw);
}

.item-list .fa-bars {
  transition: all 0.3s ease;
  font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/5c96e2fbe8.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="css/style.css" />
    <title>EdgeLedger</title>
  </head>
  <body id="home">
    <header class="hero">
      <div class="navbar top">
        <h1 class="logo">
          <a href="index.html">
            <span class="text-primary"
              ><i class="fas fa-book-open"></i> Edge</span
            >Ledger
          </a>
        </h1>

        <nav>
          <ul class="item-list">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#solutions">About</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
            <i id="ham-menu" class="fa-solid fa-bars closed"></i>
          </ul>
        </nav>
      </div>

      <div class="content">
        <h1>The Sky Is The Limit</h1>
        <p>Join us on our mission to change the world</p>
        <a href="#about" class="btn bg-primary">
          <i class="fas fa-chevron-right"></i>
          Read More
        </a>
      </div>
    </header>

    <main id="about">
      <!-- About: Services -->
      <section class="services" id="services">
        <div class="flex-icons">
          <div class="box">
            <i class="fa-solid fa-coins fa-2x"></i>
            <h3>Financial Advice</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
              atque!
            </p>
          </div>

          <div class="box">
            <i class="fa-solid fa-chart-column fa-2x"></i>
            <h3>Stock Analysis</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
              atque!
            </p>
          </div>

          <div class="box">
            <i class="fa-solid fa-handshake-angle fa-2x"></i>
            <h3>Collaborations</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
              atque!
            </p>
          </div>
        </div>
      </section>

      <!-- About: Solutions -->
      <section id="solutions">
        <div class="flex-row">
          <div class="column">
            <div class="column-1">
              <img src="img/meeting-2.jpg" alt="image" />
            </div>
          </div>

          <div class="column bg-primary">
            <div class="column-2">
              <h4>What you're looking for</h4>
              <h2>Our reputation speaks for us</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
                facere placeat ullam incidunt cum iste obcaecati aperiam
                pariatur magni, eos optio sint culpa provident laboriosam quod
                quia, suscipit alias deleniti. Natus soluta, recusandae iure
                possimus accusantium hic perferendis rem quasi et vitae
                explicabo esse doloribus quidem consectetur nobis! Eum, et.
              </p>
              <a href="#solutions" class="btn bg-outline">
                <i class="fas fa-chevron-right"></i>
                Read More
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Cases -->
      <section id="cases">
        <div class="flex-grid">
          <div class="grid-content">
            <h4>This is what we do</h4>
            <h2>Business Cases</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
              voluptatum.
            </p>
          </div>

          <div class="row">
            <div class="column">
              <img src="img/cases/cases1.jpg" alt="" />
              <img src="img/cases/cases2.jpg" alt="" />
            </div>

            <div class="column">
              <img src="img/cases/cases3.jpg" alt="" />
              <img src="img/cases/cases4.jpg" alt="" />
            </div>

            <div class="column">
              <img src="img/cases/cases5.jpg" alt="" />
              <img src="img/cases/cases6.jpg" alt="" />
            </div>

            <div class="column">
              <img src="img/cases/cases7.jpg" alt="" />
              <img src="img/cases/cases8.jpg" alt="" />
            </div>
          </div>
        </div>
      </section>

      <!-- Blog -->
      <section id="blog">
        <div class="flex-row flex-reverse">
          <div class="column">
            <div class="column-1">
              <img src="img/blog/blog-home.jpg" alt="image" />
            </div>
          </div>

          <div class="column bg-secondary">
            <div class="column-2">
              <h4>Blog | May 23 2022</h4>
              <h2>Our recent restructuring plan</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
                facere placeat ullam incidunt cum iste obcaecati aperiam
                pariatur magni, eos optio sint culpa provident laboriosam quod
                quia, suscipit alias deleniti. Natus soluta, recusandae iure
                possimus accusantium hic perferendis rem quasi et vitae
                explicabo esse doloribus quidem consectetur nobis! Eum, et.
              </p>
              <a href="blog.html" class="btn bg-outline">
                <i class="fas fa-chevron-right"></i>
                Read More
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Team -->
      <section id="team">
        <div class="team-content">
          <h4>Who we are</h4>
          <h2>Our Professional Team</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
            expedita?
          </p>
        </div>

        <div class="flex-icons">
          <div class="box">
            <img src="img/team/Chief Executive Officer.jpg" alt="" />
            <h4>Jane Smith</h4>
            <p>Chief Executive Officer</p>
          </div>

          <div class="box">
            <img src="img/team/Chief Operating Officer.jpg" alt="" />
            <h4>John Doe</h4>
            <p>Chief Operating Officer</p>
          </div>

          <div class="box">
            <img src="img/team/Chief Marketing Officer.jpg" alt="" />
            <h4>Sara Rogers</h4>
            <p>Chief Marketing Officer</p>
          </div>
        </div>
      </section>

      <section id="contact">
        <div class="flex-row">
          <div class="column">
            <div class="column-1">
              <img src="img/contact.jpg" alt="image" />
            </div>
          </div>

          <div class="column bg-light">
            <div class="column-2">
              <h2>Contact Us</h2>

              <form class="contact-form">
                <div class="form-control">
                  <label for="name"></label>
                  <input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="Full Name"
                  />
                </div>

                <div class="form-control">
                  <label for="email"></label>
                  <input
                    type="email"
                    name="email"
                    id="email"
                    placeholder="Email Address"
                  />
                </div>

                <div class="form-control">
                  <label for="phone"></label>
                  <input
                    type="text"
                    name="phone"
                    id="phone"
                    placeholder="Contact Number"
                  />
                </div>

                <textarea
                  name="message"
                  id="message"
                  placeholder="Message"
                ></textarea>
                <button type="submit" class="btn bg-primary">Send</button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer bg-dark">
      <div class="social">
        <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="#"><i class="fab fa-youtube fa-2x"></i></a>
        <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
      </div>

      <p>
        All Rights Reserved &copy; 2022,
        <span class="text-primary">Edge</span>Ledger
      </p>
    </footer>

    <!-- Scripts -->
    <script src="src/app.js"></script>
  </body>
</html>

我对 HTML/CSS 和 JavaScript 比较陌生，在这方面确实需要一些帮助，因为我已经尽了最大努力但无济于事。我将在最后包含相关代码。非常感谢您的提前帮助！

我在尝试为导航栏菜单设置动画时遇到了一些非常奇怪的行为。基本上，这是我正在上的一门课程中的一个更大项目的一部分，我决定重做整个项目并在这里和那里添加更多功能并进行实验。

在导航栏中（在 ul 内）我决定为菜单添加一个 Font Awesome 图标，然后将 list-items 从 view-port 中翻译出来。单击时，该图标会触发 JavaScript 文件中的一个函数，该函数将 list-items 转换到它们在导航栏上的位置，然后在再次按下时将它们从 view-port 中转换出来。这当然伴随着过渡，works/looks 非常适合折扣导航栏菜单。

在我问我的问题之前要解释的一件事是，当从顶部滚动超过 70 像素时，还有另一个 JavaScript 函数可以将导航栏的背景从完全透明变为 80% 不透明度，然后将其变回再次到达顶部时完全透明。 Screenshot-1 (at the top) - Screenshot-2（滚动）。

问题是，当导航栏背景的不透明度为 80% 时，会出现奇怪的行为，导航栏背景会失去其不透明度，只有 list-items 保留 80% 的不透明度。这是 example. It gets even worse when I hover over it like in this screenshot. When clicking the menu icon again to retract them out, something even weirder like this 有时会发生的情况，而导航栏上的背景会恢复其正确的不透明度。

在尝试了一些操作（例如删除悬停效果，不包括 ul 中的图标等）之后，我注意到如果我将导航栏的不透明度设置为默认值 1，这种奇怪的行为就会停止，但我想知道为什么会这样，因为我不想简单地放弃导航栏上的轻微透明度。

我确定我遗漏了一些东西或没有意识到，我很想现在就学习它以避免将来出现类似的问题。不透明度是问题所在，还是其他原因造成的？

相关代码如下。我可能会在我的 CSS 实用程序文件中遗漏一些不必要的 CSS 代码，我确信这些代码不会对此产生影响。 screenshot header 如何理解完整的 header 标签及其元素。

Answer 1

属性 opacity 不仅影响背景，还影响整个元素。你可以只用background-color属性来达到你想要的效果。

您可以像这样更改背景颜色，其中 c 是 alpha（不透明度）值。您还可以使用 rgba(51,51,51,0.8) 等同于 #333c.

.navbar {
  background-color: #333c; 
}
.navbar.top {
  background-color: transparent; 
}

您可以将背景颜色从 javascript

navbar.style.backgroundColor = '#333c' // when scrolled
navbar.style.backgroundColor = 'transparent' // when scrolled

在 list-items 上使用翻译时不透明度导致奇怪的行为

Opacity causing a weird behaviour when using translate on list-items

javascript

css