css - 带有 :checked not showing after transition complete 的过渡元素

Question

我正在创建一个仅转换后的 CSS 菜单。我采用的方法是选中(单击)菜单按钮时，菜单会从右侧过渡出来。这是我坚持的一点……过渡结束后菜单就消失了；它淡出。

有人知道为什么会这样吗？我该如何解决？

Here is a jsfiddle

#mobile-button {
	background-image: url("https://optimumwebdesigns.com/icons/menu.png");
  background-size: 30px 30px;
	float: right;
	width: 30px;
	height: 30px;
	margin-right: 5%;
	margin-top: 15px;
	cursor: pointer;
	display: block;
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
	background: rgba(0,0,0,0.7);
	height: 100vh;
}
#mobile-check:not(:checked) ~ #nav-pop {
	opacity: 0;
	right: 0;
	margin-top: 0;
	margin-right: 0;
	z-index: 999999;
	transition: ease 0.6s;-webkit-transition: ease 0.6s;
	transform: translateX(0);-webkit-transform: translateX(0);
}
#mobile-check:checked ~ #nav-pop {
	float: none;
	opacity: 1;
	position: fixed;
	margin-top: 0;
	width: 70%;
	right: -100%;
	height: 100vh;
	transform: translateX(100%);-webkit-transform: translateX(100%);
}

<input type="checkbox" id="mobile-check">
<label id="mobile-button" for="mobile-check"></label>
<div id="nav-pop">
  <div id="nav-pop-close"></div>
  <ul id="nav-list">
    <li><a href="about">ABOUT</a></li>
    <li><a href="services">SERVICES</a></li>
    <li><a href="project">PROJECT</a></li>
    <li><a href="contact">CONTACT</a></li>
  </ul>
</div>

Answer 1

您的主要问题是您从 right: 0 到 right: -100%。您正在将它关闭屏幕并向右移动。我认为你甚至看到闪光的唯一原因是因为你添加了 position:fixed 和 :checked，所以它在转换之前跳了一秒钟。

如果您为 #mobile-check ~ #nav-pop 设置标准样式，然后使用 :checked 切换其中的一些样式，这会更容易，就像这样:

#mobile-check ~ #nav-pop {
  opacity: 0;
  position: fixed;
  width: 70%;
  height: 100vh;
  right: -100%;
  margin-top: 0;
  margin-right: 0;
  z-index: 999999;
  transition: ease 0.6s;-webkit-transition: ease 0.6s;
  transform: translateX(0);-webkit-transform: translateX(0);
}
#mobile-check:checked ~ #nav-pop {
  opacity: 1;
  right: 100%;
  transform: translateX(100%);-webkit-transform: translateX(100%);
}

现在，我们开始 position: fixed 在right: -100%，然后我们就移动到离开了。

#mobile-button {
	background-image: url("https://optimumwebdesigns.com/icons/menu.png");
  background-size: 30px 30px;
	float: right;
	width: 30px;
	height: 30px;
	margin-right: 5%;
	margin-top: 15px;
	cursor: pointer;
	display: block;
	transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
	background: rgba(0,0,0,0.7);
	height: 100vh;
}
#mobile-check ~ #nav-pop {
	opacity: 0;
  position: fixed;
  width: 70%;
  height: 100vh;
	right: -100%;
	margin-top: 0;
	margin-right: 0;
	z-index: 999999;
	transition: ease 0.6s;-webkit-transition: ease 0.6s;
	transform: translateX(0);-webkit-transform: translateX(0);
}
#mobile-check:checked ~ #nav-pop {
	opacity: 1;
	right: 100%;
	transform: translateX(100%);-webkit-transform: translateX(100%);
}

<input type="checkbox" id="mobile-check">
<label id="mobile-button" for="mobile-check"></label>
<div id="nav-pop">
  <div id="nav-pop-close"></div>
  <ul id="nav-list">
    <li><a href="about">ABOUT</a></li>
    <li><a href="services">SERVICES</a></li>
    <li><a href="project">PROJECT</a></li>
    <li><a href="contact">CONTACT</a></li>
  </ul>
</div>