过渡元素：过渡完成后检查未显示

Question

我正在创建一个过渡的CSS菜单。我采取的方法是当选中（单击）菜单按钮时，菜单从右侧过渡。这是我坚持的一点......菜单在过渡结束后消失了;它淡出了。

有谁知道为什么会发生这种情况以及如何解决这个问题？

Here is a jsfiddle

＆＃13;

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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% 开始，然后我们只是向左移动。

＆＃13;

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;