CSS transition not working for height: 0 (but for other heights)

Question

I would like the transition to work when the header is going hidden as well. But it disappears immediately. Please look at the code and scroll down to see the effect:

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();
};

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;
}

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

As you can see I specified a transition, but it is ignored for some reason:

header.hidden {
  height: 0px;

  transition: .5s;
}

Hope someone can help me!

Thanks in advance:)

Answer 1

The issue is that you are removing the fixed class in the second step which create the issue as your element will get back its initial position. You should keep this class with hidden:

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();
};

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;
}

<header id="header">

</header>