时间戳

首页 > 解决方案 > 导航栏过渡

javascript - 导航栏过渡

问题描述

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

如果您想了解更多我的意思，请查看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;
}

}

标签： javascripthtmlcsscss-transitionsnavbar

解决方案

你的逻辑是合理的，你只需要修改你的 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()

例如，使用 this over 有复杂的原因left，但这里只是简单地解释一下。

更新代码：

.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;
}

推荐阅读