如何在显示:无和显示:块之间转换?

Question

我正在尝试延迟移动导航项的外观(理想情况下不使用JS延迟其外观)，直到导航覆盖完全展开(0.4秒)。

有两种状态：

1. 非覆盖状态：顶部导航左侧有一个汉堡菜单，右侧有我的名字。4 个导航链接处于隐藏状态。
2. 覆盖状态：汉堡菜单变为 x，顶部导航过渡以覆盖整个页面，4 个导航链接显示在导航覆盖的中心。

我在其他地方读到，如果显示：更改，现代浏览器将忽略任何动画或过渡规范。现在还是这样吗？如何克服此问题并延迟导航项的外观，直到叠加层完全展开？

它似乎在这里工作：https://codepen.io/KingKabir/pen/QyPwgG 但我不确定他们是如何完成的？

我尝试使用可见性：和不透明度：但它们并没有完全隐藏非覆盖状态下的 4 个导航元素，从而在非覆盖状态下弄乱了导航菜单右侧的名字。

.HTML：

<nav class="nav_container" id="overlay">
<div class="hamburger" id="hamburger" onclick="mobileMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="icon_personal_container">
<a href="../index.html">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="icon_personal">
<title>J Logo</title>
<defs>
<linearGradient x1="14.6040568%" y1="100%" x2="85.3959432%" y2="0%" id="linearGradient-1">
<stop stop-color="#12A9FF" offset="0%"></stop>
<stop stop-color="#FF0096" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle fill="#333333" cx="12" cy="11.94" r="12"></circle>
<polygon points="18.57144 7.82616 14.68812 7.82616 12 7.82616 12 5.16 18.57144 5.16"></polygon>
<path d="M12.0021063,5.16 L17.3805494,5.16 L14.6827527,7.80073139 L14.6827527,13.044557 C14.6827527,16.5810127 13.1030779,18.9 9.57770614,18.9 C8.045129,18.9 6.72924975,18.3030871 5.82008559,17.4140986 C5.81142009,17.4056254 6.46074609,16.7540162 7.76806357,15.459271 C8.20030047,15.9163181 8.81488621,16.2138397 9.57770614,16.2138397 C11.2344382,16.2138397 11.985747,15.1509705 11.985747,13.1218565 L11.985747,5.16 L12.0021063,5.16 Z"
fill="url(#linearGradient-1)"></path>
</g>
</svg>
</a>
</div>
<div class="nav_tab" id="nav_tab_about"><a href="#about" class="nav_tab_hover_effect" onclick="mobileMenu()">About</a></div>
<div class="nav_tab" id="nav_tab_work"><a href="#work" class="nav_tab_hover_effect" onclick="mobileMenu()">Work</a></div>
<div class="nav_tab" id="nav_tab_skills"><a href="#skills" class="nav_tab_hover_effect" onclick="mobileMenu()">Skills</a></div>
<div class="nav_tab" id="nav_tab_contact"><a href="#contact" class="nav_tab_hover_effect" onclick="mobileMenu()">Contact</a></div>
<div class="blanks"></div>
<div class="blanks"></div>
<div id="nav_text">Jordan Tranchina</div>
</nav>

.CSS：

.nav_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr !important;
grid-template-rows: auto;
column-gap: 16px;
grid-template-areas:
"nav-far-left nav-left nav-right nav-far-right";
}
.nav_container.open {
max-height: 100%;
height: 200%;
background-color: #000000;
display: grid;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"nav-far-left nav-left nav-right nav-far-right"
"second second second second"
"third third third third"
"fourth fourth fourth fourth"
"fifth fifth fifth fifth";
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.icon_personal_container,.blanks{
display: none;
}
.nav_tab {
display: block;
height: 0;
width: 0;
visibility: hidden;
opacity: 0;
}
.nav_tab.open{
display: block;
height: auto;
font-size: 32px;
font-weight: 500;
padding-top: 64px;
visibility: visible;
opacity: 1;
transition: visibility 0s linear;
}

#nav_tab_about.open{
grid-area: second;
transition-delay: .10s;
width: auto;
}
#nav_tab_work.open {
grid-area: third;
transition-delay: .15s;
width: auto;
}
#nav_tab_skills.open {
grid-area: fourth;
transition-delay: .2s;
width: auto;
}
#nav_tab_contact.open {
grid-area: fifth;
transition-delay: .25s;
width: auto;
}

#nav_text {
grid-area: 1 / nav-right / 1 / nav-far-right;
}

Javascript：

function mobileMenu() {
document.getElementById("hamburger").classList.toggle("active"); // toggling active class
document.body.classList.toggle("overlay-body"); //toggling overlay state on body
document.getElementById("overlay").classList.toggle("open"); //toggling overlay state on nav by setting classlist to "open"
// improve below by grabing by class not by id
document.getElementById("nav_tab_about").classList.toggle("open");
document.getElementById("nav_tab_work").classList.toggle("open");
document.getElementById("nav_tab_skills").classList.toggle("open");
document.getElementById("nav_tab_contact").classList.toggle("open");
}

我希望类"nav_tab"的导航元素在nav_container有时间完全展开后出现 10 秒。

当前的结果是类"nav_tab"的导航元素在nav_container有时间完全展开之前立即出现。

Answer 1

如果您将visibility和opacity与max-height结合使用，则可以实现从可见到隐藏的良好过渡，反之亦然。将元素的max-height设置为隐藏时0，并在可见时max-heightXpx(比元素大)，可以防止元素以任何方式弄乱布局(如您在问题中提到的)。

下面是一个快速示例：

var visible = document.querySelector(".visible");
function hide() {
visible.classList.add("hidden");
}
visible.addEventListener("click", hide);

div {
background-color: blue;
padding: 40px;
color: white;
cursor: pointer;
transition: all .1s ease;
}
.visible {
visibility: visible;
opacity: 1;
max-height: 1000px;
}
.hidden {
visibility: hidden;
opacity: 0;
max-height: 0;
}

<div class="visible">Click to hide</div>

Answer 2

您可以再添加一个参数transition即"延迟"。延迟是过渡的第四个参数，在您的情况下，它可能如下所示：

transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;

现在，此动画将以 2 秒的延迟开始。

为了让你更接近你想要实现的目标，我对你的CSS做了一些小的改变，我将在下面描述：

1. 对于元素.nav_container.open替换行：

   max-height: 100%;
   height: 200%;
   

   用一行：

   min-height: 100vh;
   

   它将使您的容器至少扩展到窗口的高度。

2. 对于元素.nav_tab替换：

   display: none;
   

   跟：

   display: block;
   opacity: 0;
   

   有了它，您可以隐藏链接并避免没有动画来显示它们。

3. 对于元素.nav_tab.open删除以下两行：

   display: block;
   visibility: visible;
   

   并添加以下两行：

   opacity: 1;
   transition: all 0.6s linear 0.4s;
   

   其中 0.6s 是动画持续时间，0.4s 是延迟 - 将其设置为不低于扩展nav_container的持续时间。

检查结果，让我知道您是否更接近目标;)