导航栏过渡

Question

所以基本上我想让我的导航栏在我单击切换打开它时从屏幕一侧滑入，目前当我打开导航栏时它来自顶部并且没有过渡

如果您想了解更多我的意思，请查看https://iamtomwalker.com，了解我的意思是让导航栏从侧面打开并过渡

HTML

<nav class="navbar"> 
    <span class="navbar-toggle" id="js-navbar-toggle"> 
        <i class="fas fa-bars"></i>
    </span> 
      <a href="#" class="logo">Title</a> 
        <ul class="navigation-bar" id="js-menu"> 
         <li><a href="../home" class="navigation-links" title="Homepage">Home</a></li> 
         <li><a href="../covers" class="navigation-links" title="Check out all my covers in one place">Covers</a></li> 
         <li><a href="../music" class="navigation-links" title="Listen to my latest music">Music</a></li> 
         <li><a href="../newsletter" class="navigation-links" title="Sign-up to the newsletter to receive early access content and latest news!">Newsletter</a></li> 
         <div class="icons">
             <li><a href="#" class="navigation-icons"><i class="fab fa-snapchat" style="padding-right: 5px;"></i> </a></li>  
             <li><a href="#" class="navigation-icons"><i class="fab fa-instagram" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
             <li><a href="#" class="navigation-icons"><i class="fab fa-youtube" style="padding-right: 5px;padding-left: 5px;"></i> </a></li> 
            <li><a href="#" class="navigation-icons"><i class="fab fa-spotify" style="padding-right: 5px;padding-left: 5px;"></i> </a></li>
            <li><a href="#" class="navigation-icons"><i class="fab fa-soundcloud" style="padding-left: 5px;"></i> </a></li>
              
         </div>
        </ul> 
</nav> 

<script>
    let mainNav = document.getElementById("js-menu"); 
    let navBarToggle = document.getElementById("js-navbar-toggle");
    navBarToggle.addEventListener("click", function() {
    mainNav.classList.toggle("active");
    });
</script>

CSS

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

.navbar { 
 font-size: 18px;
 background-color: #151515;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255,255,255,.25);
} 

.icons {
  display: flex;
  justify-content: center;
}

/* This is when the screen is small */

.navigation-bar { 
 list-style-type: none;
 display: none;
 clear: left;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 text-align: center;
 margin: 15px 0;
} 

.navigation-links, .navigation-icons, .logo{ 
 text-decoration: none;
 font-family: 'Avro', serif;
 color: #c0a869;
}

.navigation-links:hover, .navigation-icons:hover{ 
 text-decoration: underline;
}

.logo { 
 display: inline-block;
 font-size: 22px;
 margin-top: 10px;
 margin-left: 20px;
 font-weight: 700;
}
 
.navbar-toggle { 
 position: absolute;
 top: 10px;
 right: 20px;
 cursor: pointer;
 color: #c0a869;
 font-size: 24px;
} 
 
.active { 
 display: block;
 } 
 
/* This is when the screen is big */
 
 @media screen and (min-width: 768px) { 

.navbar {
 display: flex;
 justify-content: space-between;
 padding-bottom: 0;
 height: 70px;
 align-items: center;
} 
 
.navigation-bar { 
 display: flex;
 margin-right: 30px;
 flex-direction: row;
 justify-content: flex-end;
}

.navigation-bar li { 
 margin: 0;
}
 
.navigation-links, .navigation-icons { 
 margin-left: 25px;
} 

.logo { 
 margin-top: 0;
} 
 
.navbar-toggle { 
 display: none;
} 
 
.logo:hover, .navigation-links:hover, .navigation-icons:hover { 
 color: #dec27a;
}

}

Answer 1

你的逻辑是正确的，你只需要修改你的 CSS 来让你的过渡工作。我不会在这里写所有的 CSS，只写相关的部分，这样你就可以从那里拿走了。

1。要使元素平滑过渡，请使用 'transition' 属性。

.navigation-bar {
  transition: transform 1s ease-out;
}

这段代码表明，每当元素上的“转换”属性发生变化时，在 1 秒内更改的值之间进行转换，然后“缓出”（看起来更好）。

2。您只能“过渡”某些 CSS 属性

设置“显示：无；”规则将使您的过渡无效。这是因为当一个元素有 'display: none;'它本质上不是由浏览器呈现的。当您切换到“display: block;”时，您无法在状态之间转换，因为在此之前，就您的 CSS 布局而言，该元素根本不存在。

如果你想使用过渡，不要设置 'display: none;'一点也不。相反，使用可见性，它隐藏元素，但仍呈现其尺寸和内容。更新代码：

.navigation-bar {
  transition: transform 1s ease-out, visibility 1s;
  visibility: hidden;
}

.navigation-bar.active {
  transition: transform 1s ease-out, visibility 0s;
  visibility: visible;
}

请注意以下几点：我们在过渡中添加了“可见性”属性；我们添加了一个“活动”过渡 -> 当元素变为“活动”时，我们希望可见性立即生效，因此visibility 0s。当“活动”类被移除时，我们希望可见性在 1 秒后变回“隐藏”，因此visibility 1s。

3。使用 transform: translateX() 从左到右移动元素

例如，在left 上使用它的原因很复杂，但在here 上进行了简单的解释。

更新代码：

.navigation-bar {
  transform: translateX(-300px); /* the element is transposed 300px to the left of where it's supposed to be */
  transition: transform 1s ease-out, visibility 1s;
  visibility: hidden;
  width: 300px;
}

.navigation-bar.active {
  transform: translateX(0px); /* the element is returned to where it's supposed to be */
  transition: transform 1s ease-out, visibility 0s;
  visibility: visible;
}

---

您需要添加额外的 CSS 以确保您的布局按预期工作，但我只想强调过渡的基本方面。

如果您想知道如何定位导航元素，您可能需要添加一些布局规则，如下所示：

/*
 place at top-left corner of screen, full height, 300px wide
*/
.navigation-bar {
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 300px;
}