当位置固定时,过渡不起作用

Question

单击codepen中的图标以查看输出.

我想要修理容器.但是,当容器被修复时,X图标的转换不起作用.当我单击菜单按钮时,X图标没有转换.

您需要取消注释固定的位置,以查看它对X图标的影响.

https://codepen.io/anon/pen/dzxaGb

#container {
  display: none;
/*  Uncomment the position fixed  */
/*   position: fixed; */
  height: 100%;
  width: 100%;
  background: blue;
  z-index: 9999;  
  transition: all 0.2s linear;
}

#menu, #close {    
  position: absolute;
  top: 4%;
  right: 2%;  
  transition: all 0.3s linear;  
  font-size: 3em;
}

#close {
  opacity: 0;
}

Answer 1

当您单击菜单图标时，您可以临时更改容器的位置。这不是最好的，但它有效。

添加此代码：

menu.onclick = function() {
  container.style.position = 'static';
}

x.onclick = function() {
  container.style.position = 'fixed';
}