所以基本上我想让我的导航栏在我点击切换按钮打开它时从屏幕的侧面滑入,目前当我打开导航栏时它来自顶部并且没有过渡
如果您想更准确地了解我的意思,请查看 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;
}
}
答案 0 :(得分:0)
你的逻辑是合理的,你只需要修改你的 CSS 来让你的过渡工作。我不会在这里写所有的 CSS,而只会写相关的部分,这样你就可以从那里开始。
.navigation-bar {
transition: transform 1s ease-out;
}
这段代码表示,每当元素上的 'transform' 属性发生变化时,在 1 秒内在更改后的值和 'ease-out' 之间进行转换(看起来更好)。
设置'display: none;'规则将使您的过渡无效。这是因为当一个元素有 'display: none;'它本质上不是由浏览器呈现的。当您切换到“显示:块;”时,您无法在状态之间转换,因为直到此时,就您的 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
。
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;
}