CODEWITHSUNDEEP
csscss-transitions
Paul
Paul

Reputation: 3368

Transitioned element with :checked not showing after transition complete

I am creating a transitioned CSS only menu. The approach I am taking is when the menu button is checked (clicked) the menu transitions out from the right side. This is point I am stuck on ... the menu just vanishes after the transition ends; it fades out.

Does anyone see why this is happening and how I can fix it?

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>

Upvotes: 1

Views: 192

Answers (1)

cjl750
cjl750

Reputation: 4629

Your main problem is that you were going from right: 0 to right: -100%. You were transitioning it off screen to the right. I think the only reason you even saw the flash is because you were adding position: fixed with :checked, so it jumped for a sec before transitioning.

This will be easier if you set standard styles for #mobile-check ~ #nav-pop and then just toggle a few of them with :checked, like this:

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

Now, we're starting with position: fixed at right: -100%, and then we're just moving to the left.

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

Upvotes: 1

Related Questions