CSS过渡不适用于高度：0（但对于其他高度）

Question

我希望在标题隐藏时转换也能正常工作。但它会立即消失。请查看代码并向下滚动以查看效果：

＆＃13;

＆＃13;

function getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

function showHeaderHidden() {
    document.getElementById('header').classList.add('hidden');
    document.getElementById('header').classList.remove('fixed');
}

function showHeaderFixed() {
    document.getElementById('header').classList.add('fixed');
    document.getElementById('header').classList.remove('hidden');
}

function showHeaderFull() {
    document.getElementById('header').classList.remove('fixed');
    document.getElementById('header').classList.remove('hidden'); 
}

var lastScrollTop = 0;

function atPageTop(scroll) {
    return scroll < 1;
}

function scrollingDown(scroll) {
    return scroll > lastScrollTop
}

function onWindowScroll() {
    var scrollTop = getScrollTop();
    
    if (scrollingDown(scrollTop)) {
        if (scrollTop > 300) {
            showHeaderHidden();
        } else {
            showHeaderFixed();
        }
    } else {
        if (atPageTop(scrollTop)) {
            showHeaderFull();
        } else {
            showHeaderFixed();
        }
    }
    
    lastScrollTop = scrollTop;
}

lastScrollTop = getScrollTop();

window.onscroll = function () {
  onWindowScroll();
};

＆＃13;

body {
  height: 2000px;
  margin: 0px;
}

header {
  height: 120px;
  background: red;
  
  transition: .5s;
}

header.fixed {
  position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
  background: green;
  
  transition: .5s;
}

header.hidden {
  height: 0px;
}

＆＃13;

<header id="header">
  
</header>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，我指定了转换，但由于某种原因会被忽略：

header.hidden {
  height: 0px;

  transition: .5s;
}

希望有人可以帮助我！

提前致谢：）

Answer 1

问题是您要在第二步中删除fixed类，因为您的元素将返回其初始位置，从而产生问题。您应该将此课程保留为hidden：

＆＃13;

＆＃13;

function getScrollTop() {
  return window.pageYOffset || document.documentElement.scrollTop;
}

function showHeaderHidden() {
  document.getElementById('header').classList.add('hidden');
  /* document.getElementById('header').classList.remove('fixed'); remove this*/
}

function showHeaderFixed() {
  document.getElementById('header').classList.add('fixed');
  document.getElementById('header').classList.remove('hidden');
}

function showHeaderFull() {
  document.getElementById('header').classList.remove('fixed');
  document.getElementById('header').classList.remove('hidden');
}

var lastScrollTop = 0;

function atPageTop(scroll) {
  return scroll < 1;
}

function scrollingDown(scroll) {
  return scroll > lastScrollTop
}

function onWindowScroll() {
  var scrollTop = getScrollTop();

  if (scrollingDown(scrollTop)) {
    if (scrollTop > 300) {
      showHeaderHidden();
    } else {
      showHeaderFixed();
    }
  } else {
    if (atPageTop(scrollTop)) {
      showHeaderFull();
    } else {
      showHeaderFixed();
    }
  }

  lastScrollTop = scrollTop;
}

lastScrollTop = getScrollTop();

window.onscroll = function() {
  onWindowScroll();
};

＆＃13;

body {
  height: 2000px;
  margin: 0px;
}

header {
  height: 120px;
  background: red;
  transition: .5s;
}

header.fixed {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: green;
  /*transition: .5s; can be removed */
}

header.hidden {
  height: 0px;
}

＆＃13;

<header id="header">

</header>

＆＃13;

＆＃13;

＆＃13;