javascript - CSS 过渡只适用于一种方式
问题描述
想要在切换菜单打开/关闭时添加不透明度过渡。它在菜单打开时有效,但在菜单关闭时无效。为什么会这样?
// Selectors
let header = document.querySelector('.header')
let hamburgerMenu = document.querySelector('.hamburger-menu')
hamburgerMenu.addEventListener('click', function() {
header.classList.toggle('menu-open');
})
/* Basic reset */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Custom properties */
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/* Global styles */
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/* Reusable styles */
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
/* Header styles */
.header {
background-color: var(--purple-transparent);
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
/* Header styles - nav */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .nav-list {
opacity: 100%;
transform: scale(1);
transition: opacity .5s;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
/*
.header
.container
.nav
.logo
img
.hamburger-menu
i
.nav-list
.nav-item
.nav-link
*/
.nav-item:not(last-child) {
margin-bottom: 4rem;
}
.nav-link {
display: block; /* allows us to use margin & paddings - by default they're inline elements and so no margin / padding */
color: #fff;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
padding: 1rem;
}
<header class="header">
<div class="container">
<nav class="nav">
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Offers</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">News</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
解决方案
可能不是您想要的答案,但我希望它有所帮助。
通过删除transform: scale(1);
(and transform: scale(0);
) 过渡可以顺利进行双向。真的需要这种转变吗?
尝试:
.menu-open .nav-list {
opacity: 100%;
transition: all .5s ease-in-out;
visibility: visible;
}
.nav-list {
background-color: var(--purple-solid);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1400;
opacity: 0;
transition: all .5s ease-in-out;
visibility: hidden;
}
推荐阅读
- macos - 对来自 macos 终端的所有连接使用 nexus 默认令牌/凭据
- android - 无法在 android studio 中运行模拟器
- android - 为什么我会收到此错误“从服务器收到状态代码 401:未经授权”?
- c - C/C++:当服务器重新启动时,客户端永远不会恢复 DTLS 连接
- ios - SwiftUI,如何禁用对列表项的触摸,但对列表项的子视图启用触摸?
- excel - 是否有一个公式可以从一张纸(不包括空白)中捕获所有值并在另一张纸上按顺序显示?
- sql - Postgres alter table 默认为 'NULL::character varying' 而不是 NULL
- c++ - 'binary_semaphore' 尚未在 'std' 中声明
- android - 如何使用 Android Studio 生成 javadoc
- flutter - 横幅广告在列中使用时隐藏 AppBar