Я создаю переходное меню только для 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>
1
Paul 28 Июн 2017 в 20:12
2
Так это должно выглядеть? jsfiddle.net/cqofj101/2
 – 
cjl750
28 Июн 2017 в 20:29
Эта функциональность идеальна. Спасибо! Значит, мой первоначальный right: 0 был противоречивым?
 – 
Paul
28 Июн 2017 в 20:34
Стоимость right была большей частью, да. Я отправлю ответ.
 – 
cjl750
28 Июн 2017 в 20:35

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>
1
cjl750 28 Июн 2017 в 20:39
1
Спасибо за помощь!
 – 
Paul
28 Июн 2017 в 20:52