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

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