トランジション付きの要素：トランジション完了後にチェックされないチェック

Question

トランジションされたCSSのみのメニューを作成しています。私が取っているアプローチは、メニューボタンがチェック（クリック）され、メニューが右側から切り替わるときです。これは私が立ち往生している点です...移行が終わった後にメニューが消えてしまいます。それはフェードアウトする。

これがなぜ起こっているのか、どのように修正できるのか誰にも分かりますか？

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

あなたの主な問題は、あなたがright: 0からright: -100%に行っていたということです。あなたはそれをオフに画面から右に動かしていました。フラッシュを見た唯一の理由は、に:checkedを追加しているためです。そのため、移行する前に1秒間ジャンプしました。

これは、あなたが#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 { 
 
\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>