javascript - 如何让可见性过渡延迟？

Question

以下片段几乎是我目前元素的逐字复制(我已经将超棒的字体换成了问号，并且图像有所不同)。

我试图通过滚动使导航栏淡入淡出，为了防止“不可见”菜单项可点击，我需要设置 visibilty: hidden;给他们。

过渡在向上滚动时效果很好，但在向下滚动时，即使我在 CSS 中添加了延迟，可见性过渡也会立即发生。我一辈子都想不通这个问题。我错过了什么吗？

var minHeaderHeight = 100; // Height of shrunken header, in pixels
var header = document.querySelector("#header"); // The header object
var maxHeaderHeight = outerHeight(header, true); // Height of expanded header, in pixels

document.addEventListener("DOMContentLoaded", initHeader);

function initHeader() {
	var	landingImage = document.getElementById("landing-image");
	if (landingImage !== null) { 
		header.classList.add("expanded");
    window.addEventListener('scroll', scrollCallback);
	} else {
		header.parentNode.style.paddingTop = minHeaderHeight + "px";
	}
}

function scrollCallback() {
	var scrollOffset = windowScrollTop();
	var transitionEvent;
	if (scrollOffset > 10) {
		header.classList.remove("expanding");
		header.classList.add("shrinking");
		header.classList.remove("expanded");
	} else {
		header.classList.remove("shrinking");
		header.classList.add("expanding");
		header.classList.add("expanded");
	}
}

// THESE TWO FUNCTIONS REPLICATE SIMILAR FUNCTIONS FROM JQUERY
function outerHeight(el, withMargins) {
	withMargins = withMargins || false;
	if (withMargins) {
	  var height = el.offsetHeight;
	  var style = getComputedStyle(el);
	  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
	  return height;
	} else {
		return el.offsetHeight;
	}
}

function windowScrollTop(pos) {
	if (typeof pos === 'undefined') {
		if (window.pageYOffset !== undefined) {
			return window.pageYOffset;
		} else {
			return (document.documentElement || document.body.parentNode || document.body).scrollTop;
		}
	} else {
		document.documentElement.scrollTop = pos;
		document.body.parentNode.scrollTop = pos;
		document.body.scrollTop = pos;
		window.pageYOffset = pos;
	}
}

#header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #000;
  height: 100px;
  text-transform: uppercase;
  font-size: 2em;
  color: white;
}

#header a {
	color: white;
  text-decoration: none;
}

#header-inner {
	width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
#header.expanded {
	height: 100vh;
	background-color: transparent;
}

#header.expanding {
	-webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
	-moz-transition: height 300ms ease-in-out, background 300ms ease-in;
	-ms-transition: height 300ms ease-in-out, background 300ms ease-in;
	-o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header.shrinking {
	-webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
	-moz-transition: height 300ms ease-in-out, background 300ms ease-in;
	-ms-transition: height 300ms ease-in-out, background 300ms ease-in;
	-o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header-logos {
	position: relative;
}

#header-logos img {
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	max-height: 100px;
}

#header.shrinking img {
	-webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

#header.expanding img {
	-webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

.header-button {
	-webkit-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -moz-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -ms-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -o-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
}

#header.expanded .header-button {
  opacity: 0;
  visibility: hidden;
	-webkit-transition: visibility 0ms linear 300ms;
  -moz-transition: visibility 0ms linear 300ms;
  -ms-transition: visibility 0ms linear 300ms;
  -o-transition: visibility 0ms linear 300ms;
  transition: visibility 0ms linear 300ms;
}

#header-logo-top {
	opacity: 0;
}

#header.expanded #header-logo-top {
	opacity: 1;
}

#header.expanded img {
  max-height: 500px;
}

#landing-image {
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#landing-image.home-page {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/KANTHALLOOR%2CEruvikulam%26Anamalais_in_the_background.jpg");
}

#page-content {
    max-width: 50%;
}

<div id="header">
  <div id="header-inner">
	  <div class="header-button menu-bars">
	      <a href="#">?</a>
	  </div>
    <div id="header-link-1" class="header-button">
        <a href="#" class="btn">Link 1</a>
    </div>
    <div id="header-link-2" class="header-button">
        <a href="#" class="btn">Link 2</a>
    </div>
    <div id ="header-logos">
			<a href="#"><img id="header-logo-bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png"></a>
			<a href="#"><img id="header-logo-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/2000px-Google_Chrome_icon_%282011%29.svg.png"></a>
	  </div>
    <div id="header-dates" class="header-button">
        1 | 2 | 3 JAN 2018
    </div>
    <div id="header-socials" class="header-button">
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
    </div>
	  <div class="header-button spacer">
	  </div>
  </div>
</div>
<div id="landing-image" class="home-page"></div> 
<div id="page-content">
LOREM IPSUM DOLOR SIT AMET, consectetur adipiscing elit. Nullam scelerisque magna non dui auctor placerat. Vestibulum cursus placerat mauris eget luctus. Maecenas sollicitudin mauris id erat porttitor, in dapibus ligula commodo. Donec sagittis sagittis felis non elementum. Nam facilisis non sapien non ultrices. Morbi cursus molestie nibh non tincidunt. Sed sagittis erat eu enim condimentum, ut lobortis nisi faucibus. Cras orci felis, molestie in ligula sit amet, vestibulum malesuada augue. Nullam id aliquam enim, eu vestibulum massa. Mauris ultricies ante sit amet leo ullamcorper, a lacinia nulla hendrerit. Aenean eros dolor, semper non nisi eu, maximus accumsan felis. Donec facilisis pellentesque lacus, quis vestibulum ipsum pretium tempus.
</div>

Answer 1

这不是立即发生的可见性转换，而是不透明度立即变为 0。

在您的示例中 #header.expanded .header-button 具有 transition: visibility 0ms linear 300ms; 禁用为 .header-button< 声明的不透明度转换.

为 #header.expanded .header-button 显式添加不透明度过渡应该可以解决问题。

var minHeaderHeight = 100; // Height of shrunken header, in pixels
var header = document.querySelector("#header"); // The header object
var maxHeaderHeight = outerHeight(header, true); // Height of expanded header, in pixels

document.addEventListener("DOMContentLoaded", initHeader);

function initHeader() {
	var	landingImage = document.getElementById("landing-image");
	if (landingImage !== null) { 
		header.classList.add("expanded");
    window.addEventListener('scroll', scrollCallback);
	} else {
		header.parentNode.style.paddingTop = minHeaderHeight + "px";
	}
}

function scrollCallback() {
	var scrollOffset = windowScrollTop();
	var transitionEvent;
	if (scrollOffset > 10) {
		header.classList.remove("expanding");
		header.classList.add("shrinking");
		header.classList.remove("expanded");
	} else {
		header.classList.remove("shrinking");
		header.classList.add("expanding");
		header.classList.add("expanded");
	}
}

// THESE TWO FUNCTIONS REPLICATE SIMILAR FUNCTIONS FROM JQUERY
function outerHeight(el, withMargins) {
	withMargins = withMargins || false;
	if (withMargins) {
	  var height = el.offsetHeight;
	  var style = getComputedStyle(el);
	  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
	  return height;
	} else {
		return el.offsetHeight;
	}
}

function windowScrollTop(pos) {
	if (typeof pos === 'undefined') {
		if (window.pageYOffset !== undefined) {
			return window.pageYOffset;
		} else {
			return (document.documentElement || document.body.parentNode || document.body).scrollTop;
		}
	} else {
		document.documentElement.scrollTop = pos;
		document.body.parentNode.scrollTop = pos;
		document.body.scrollTop = pos;
		window.pageYOffset = pos;
	}
}

#header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #000;
  height: 100px;
  text-transform: uppercase;
  font-size: 2em;
  color: white;
}

#header a {
	color: white;
  text-decoration: none;
}

#header-inner {
	width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
#header.expanded {
	height: 100vh;
	background-color: transparent;
}

#header.expanding {
	-webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
	-moz-transition: height 300ms ease-in-out, background 300ms ease-in;
	-ms-transition: height 300ms ease-in-out, background 300ms ease-in;
	-o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header.shrinking {
	-webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
	-moz-transition: height 300ms ease-in-out, background 300ms ease-in;
	-ms-transition: height 300ms ease-in-out, background 300ms ease-in;
	-o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header-logos {
	position: relative;
}

#header-logos img {
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	max-height: 100px;
}

#header.shrinking img {
	-webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

#header.expanding img {
	-webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

.header-button {
	-webkit-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -moz-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -ms-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  -o-transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
  transition: opacity 300ms ease-in-out, visibility 0ms linear 0ms;
}

#header.expanded .header-button {
  opacity: 0;
  visibility: hidden;
	-webkit-transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
  -moz-transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
  -ms-transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
  -o-transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
  transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
}

#header-logo-top {
	opacity: 0;
}

#header.expanded #header-logo-top {
	opacity: 1;
}

#header.expanded img {
  max-height: 500px;
}

#landing-image {
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#landing-image.home-page {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/KANTHALLOOR%2CEruvikulam%26Anamalais_in_the_background.jpg");
}

#page-content {
    max-width: 50%;
}

<div id="header">
  <div id="header-inner">
	  <div class="header-button menu-bars">
	      <a href="#">?</a>
	  </div>
    <div id="header-link-1" class="header-button">
        <a href="#" class="btn">Link 1</a>
    </div>
    <div id="header-link-2" class="header-button">
        <a href="#" class="btn">Link 2</a>
    </div>
    <div id ="header-logos">
			<a href="#"><img id="header-logo-bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png"></a>
			<a href="#"><img id="header-logo-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/2000px-Google_Chrome_icon_%282011%29.svg.png"></a>
	  </div>
    <div id="header-dates" class="header-button">
        1 | 2 | 3 JAN 2018
    </div>
    <div id="header-socials" class="header-button">
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
			<span>|</span>
			<a href="#">?</a>
    </div>
	  <div class="header-button spacer">
	  </div>
  </div>
</div>
<div id="landing-image" class="home-page"></div> 
<div id="page-content">
LOREM IPSUM DOLOR SIT AMET, consectetur adipiscing elit. Nullam scelerisque magna non dui auctor placerat. Vestibulum cursus placerat mauris eget luctus. Maecenas sollicitudin mauris id erat porttitor, in dapibus ligula commodo. Donec sagittis sagittis felis non elementum. Nam facilisis non sapien non ultrices. Morbi cursus molestie nibh non tincidunt. Sed sagittis erat eu enim condimentum, ut lobortis nisi faucibus. Cras orci felis, molestie in ligula sit amet, vestibulum malesuada augue. Nullam id aliquam enim, eu vestibulum massa. Mauris ultricies ante sit amet leo ullamcorper, a lacinia nulla hendrerit. Aenean eros dolor, semper non nisi eu, maximus accumsan felis. Donec facilisis pellentesque lacus, quis vestibulum ipsum pretium tempus.
</div>