如何才能使可见性过渡延迟？

时间：2017-10-30 18:59:17

标签： javascript css delay transition visibility

以下代码段几乎是我项目的逐字副本（我已经换掉了字体很棒的问号，而且图像不同）。

我试图用滚动条淡入淡出导航栏，以防止＆＃34;隐形＆＃34;菜单项可点击，我需要将visibilty: hidden;设置为它们。

转换在向上滚动时效果很好，但在向下滚动时，即使我在CSS中添加了延迟，也会立即发生可见性转换。我不能为我的生活找到问题所在。我错过了什么吗？

＆＃13;
＆＃13; 
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;
	}
}
＆＃13; 
#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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

立即发生可见性转换，但不透明度立即变为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>

相关问题
最新问题