Css 已选中的已转换元素：转换完成后不显示

我正在创建一个只转换CSS的菜单。我采取的方法是，当选中（单击）菜单按钮时，菜单从右侧过渡。这是我一直坚持的观点。。。过渡结束后，菜单将消失；它消失了

有人知道为什么会发生这种情况，以及我如何解决它吗

#移动按钮{
背景图像：url（“https://optimumwebdesigns.com/icons/menu.png");
背景尺寸：30px 30px；
浮动：对；
宽度：30px；
高度：30px；
保证金权利：5%；
边缘顶部：15px；
光标：指针；
显示：块；
转换：ease 0.3s；-webkit转换：ease 0.3s；
}
#导航波普{
背景：rgba（0,0,0,0.7）；
高度：100vh；
}
#移动检查：未（：已检查）~#导航弹出{
不透明度：0；
右：0；
边际上限：0；
右边距：0；
z指数：999999；
转换：易用0.6s；-webkit转换：易用0.6s；
转换：translateX（0）；-webkit转换：translateX（0）；
}
#移动检查：已检查~#导航弹出{
浮动：无；
不透明度：1；
位置：固定；
边际上限：0；
宽度：70%；
右图：-100%；
高度：100vh；
转换：translateX（100%）；-webkit转换：translateX（100%）；
}

你的主要问题是你从

正确：0

到

正确：-100%

。您正在将其从屏幕切换到右侧。我想你看到flash的唯一原因是因为你在添加

位置：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%);
}

现在，我们从

位置开始：fixed

位于

右侧：-100%

，然后向左移动

#移动按钮{
背景图像：url（“https://optimumwebdesigns.com/icons/menu.png");
背景尺寸：30px 30px；
浮动：对；
宽度：30px；
高度：30px；
保证金权利：5%；
边缘顶部：15px；
光标：指针；
显示：块；
转换：ease 0.3s；-webkit转换：ease 0.3s；
}
#导航波普{
背景：rgba（0,0,0,0.7）；
高度：100vh；
}
#移动支票~#导航弹出{
不透明度：0；
位置：固定；
宽度：70%；
高度：100vh；
右图：-100%；
边际上限：0；
右边距：0；
z指数：999999；
转换：易用0.6s；-webkit转换：易用0.6s；
转换：translateX（0）；-webkit转换：translateX（0）；
}
#移动检查：已检查~#导航弹出{
不透明度：1；
右：100%；
转换：translateX（100%）；-webkit转换：translateX（100%）；
}

它应该是这样的吗@cjl750的功能是完美的。谢谢所以基本上我的初始

右：0

是冲突的？是的，

右

值是其中的大部分。我会发布一个答案。谢谢你的帮助！