absolute position smooth transition

Question

I am animating a hamburger menu on mouseover with absolute position it works fine but I want it to be smooth. I tried to set transition to the span but it' didn't work. Here is my code.

const mainHeader = document.querySelector('#header');
const barOne = document.querySelector('.bar-1');
const barThree = document.querySelector('.bar-3');
mainHeader.addEventListener('mouseover', () => {
  barOne.style.top = '6px';
  barThree.style.top = '-6px';
})

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu span {
  background: #3d3d3d;
  width: 30px;
  height: 1px;
  display: block;
  margin-bottom: 6px;
  position: relative;
  transition: all 1s;
}

I just want the transition to be smooth when bar -1 and bar-3 move from its original position.

user_8620333 · Answer

You can simplify your code like this:

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu {
  background: 
    linear-gradient(#3d3d3d,#3d3d3d) top,
    linear-gradient(#3d3d3d,#3d3d3d) center,
    linear-gradient(#3d3d3d,#3d3d3d) bottom;
  background-size:100% 1px;
  background-repeat:no-repeat;
  width: 30px;
  height: 15px;
  transition: background-position 1s;
}
nav.menu:hover {
  background-position:center;
}

user_220272 · Answer

No need for javascript. The most important thing is that for the top property to animate you have to set a default value, for this case:

top: 0px;

Here is an example:

#header {
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  cursor: pointer;
}

nav.menu span {
  background: #3d3d3d;
  width: 30px;
  height: 1px;
  display: block;
  margin-bottom: 6px;
  position: relative;
  transition: all 1s;
  top: 0px;
}

#header:hover .bar-1 {
  top: 6px
}

#header:hover .bar-3 {
  top: -6px
}

absolute position smooth transition

2 Answers