Élément transité avec: coché ne pas apparaître après la fin de la transition

Question

Je crée un menu CSS uniquement avec transition. L'approche que je prends est quand le bouton de menu est coché (cliqué) le menu transite du côté droit. C'est le point sur lequel je suis coincé ... le menu disparaît juste après la fin de la transition; il disparaît.

Est-ce que quelqu'un voit pourquoi cela se produit et comment je peux le réparer?

Here is a jsfiddle

#mobile-button { 
 
\t background-image: url("https://optimumwebdesigns.com/icons/menu.png"); 
 
    background-size: 30px 30px; 
 
\t float: right; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t margin-right: 5%; 
 
\t margin-top: 15px; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t transition: ease 0.3s;-webkit-transition: ease 0.3s; 
 
} 
 
#nav-pop { 
 
\t background: rgba(0,0,0,0.7); 
 
\t height: 100vh; 
 
} 
 
#mobile-check:not(:checked) ~ #nav-pop { 
 
\t opacity: 0; 
 
\t right: 0; 
 
\t margin-top: 0; 
 
\t margin-right: 0; 
 
\t z-index: 999999; 
 
\t transition: ease 0.6s;-webkit-transition: ease 0.6s; 
 
\t transform: translateX(0);-webkit-transform: translateX(0); 
 
} 
 
#mobile-check:checked ~ #nav-pop { 
 
\t float: none; 
 
\t opacity: 1; 
 
\t position: fixed; 
 
\t margin-top: 0; 
 
\t width: 70%; 
 
\t right: -100%; 
 
\t height: 100vh; 
 
\t 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

Votre principal problème est que vous alliez right: 0-right: -100%. Vous étiez la transition hors écran vers la droite. Je pense que la seule raison pour laquelle vous avez même vu le flash est que vous étiez en train d'ajouter position: fixed avec :checked, donc il a sauté pendant une seconde avant la transition.

Ce sera plus facile si vous définissez les styles standards pour #mobile-check ~ #nav-pop et puis juste basculer certains d'entre eux avec :checked, comme ceci:

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

Maintenant, nous sommes à partir avec position: fixed à right: -100%, et alors nous allons juste à gauche.

#mobile-button { 
 
\t background-image: url("https://optimumwebdesigns.com/icons/menu.png"); 
 
    background-size: 30px 30px; 
 
\t float: right; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t margin-right: 5%; 
 
\t margin-top: 15px; 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t transition: ease 0.3s;-webkit-transition: ease 0.3s; 
 
} 
 
#nav-pop { 
 
\t background: rgba(0,0,0,0.7); 
 
\t height: 100vh; 
 
} 
 
#mobile-check ~ #nav-pop { 
 
\t opacity: 0; 
 
    position: fixed; 
 
    width: 70%; 
 
    height: 100vh; 
 
\t right: -100%; 
 
\t margin-top: 0; 
 
\t margin-right: 0; 
 
\t z-index: 999999; 
 
\t transition: ease 0.6s;-webkit-transition: ease 0.6s; 
 
\t transform: translateX(0);-webkit-transform: translateX(0); 
 
} 
 
#mobile-check:checked ~ #nav-pop { 
 
\t opacity: 1; 
 
\t right: 100%; 
 
\t 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>