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

Question

我正在创建一个过渡的CSS菜单。我正在采用的方法是在检查菜单按钮时(单击(菜单从右侧过渡。这是我被困在上面的重点...菜单在过渡结束后就消失了。它消失了。

有人看到为什么会发生这种情况以及如何解决？

这是一个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%。您正在向右过渡屏幕。我认为您甚至看到Flash的唯一原因是因为您使用:checked添加了position: fixed，因此它在过渡之前跳了一秒钟。

，如果您为#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%);
}

现在，我们在right: -100%上使用position: fixed开始，然后我们就向左移动。

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