日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は 以前自分が作成したサンプルの改善案を紹介します。
###テーマ：アニメーションの動的制御を CSS の疑似要素を活用し、JavaScript 無しで行う
今まではアニメーション制御用のクラスを付け替えるために、タグをクリックするとJavascript(jQuery)でクラスの付け替えを行い、クラスに対応したアニメーションが実行されるようにしていました。
####記述サンプル
今回もHTMLファイルに全ての記述を行うので、コードをそのままコピペするだけで、実際の動作を確認出来るようにしています。
HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<style>
* {
margin: 0;
}
/* menu buttom */
input {
display: none;
}
input[name="menu"] ~ label[for="menu"] {
/* 配置 */
position: fixed;
top: 40px;
right: calc(5% + 30px);
z-index: 2;
/* 配置 */
/* 大きさ */
box-sizing: border-box;
border: 10px double white;
border-radius: 50%;
width: 50px;
height: 50px;
/* 大きさ */
cursor: pointer;
transition: all 1s 0s;
-webkit-transition: all 1s 0s;
}
input[name="menu"]:checked ~ label[for="menu"] {
right: calc(20px + 30px);
}
/* menu buttom */
/* main screen */
#screen {
/* 配置 */
position: fixed;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
/* 配置 */
/* 大きさ */
border-radius: 20px;
width: 90%;
max-width: 750px;
min-height: 95%;
z-index: 0;
/* 大きさ */
box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
background-color: rgba(15,15,15,0.9);
transition: 1s all;
}
input[name="menu"]:checked ~ #screen {
/* 配置 */
right: 20px;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
/* 配置 */
width: 60%;
}
/* main screen */
/* content */
#hide_start {
/* 配置 */
margin: auto;
position: relative;
top: 40px;
/* 配置 */
/* 大きさ */
width: 90%;
max-width: 750px;
/* 大きさ */
color: #fff;
}
/* content */
/* menu */
input[name="menu"] ~ #hide_start > #menu {
/* 配置 */
box-sizing: border-box;
padding-left: 1em;
position: fixed;
right: 20px;
/* 配置 */
/* 大きさ */
width: 60%;
max-width: 750px;
/* 大きさ */
opacity: 0;
pointer-events: none;
transition: all .5s;
-webkit-transition: all .5s;
}
input[name="menu"]:checked ~ #hide_start > #menu {
opacity: 1;
pointer-events: unset;
}
/* menu */
/* main */
input[name="menu"] ~ #hide_start > #content {
/* 配置 */
margin: auto;
box-sizing: border-box;
padding: 0 1em;
position: relative;
/* 配置 */
opacity: 1;
transition: all .5s;
-webkit-transition: all .5s;
}
input[name="menu"]:checked ~ #hide_start > #content {
opacity: 0;
pointer-events: none;
}
/* main */
/* anime1 */
.show {
pointer-events: none;
opacity: 0;
animation: show .5s .5s 1 forwards;
-webkit-animation: show .5s .5s 1 forwards;
}
@keyframes show {
100% {
opacity: 1;
pointer-events: unset;
}
}
@-webkit-keyframes show {
100% {
opacity: 1;
pointer-events: unset;
}
}
/* anime1 */
@media(min-width: 850px) {
/* PC設定 */
input[name="menu"] ~ label[for="menu"] {
right: calc(50% - 360px);
}
input[name="menu"]:checked ~ label[for="menu"] {
right: calc(1% + 20px);
}
}
</style>
</head>
<body id="" class="">
<input id="menu" type="checkbox" name="menu"><label class="show" for="menu"></label>
<div id="screen"></div>
<div class="show" id="hide_start">
<nav id="menu" class="none">
<h2>MENU</h2>
</nav>
<main id="content">
<h1>CONTENTS</h1>
</main>
</div>
</body>
</html>
###解説
・前回は Javascript の onclick イベントで CSS の各クラスを付け替える事でアニメーションを実行しましたが、今回は input タグの type="checkbox" と、CSS の疑似要素 :checked を使用します。
・input タグの場所についてですが、 CSS のセレクターは直前の要素を指定する事が出来ない為、HTML でアニメーションを実行するタグよりも手前に配置してください（今回はページの背景部分を変化させるので、input タグは body タグ直下の先頭に配置しています。）
・今回は CSS で input[name="menu"] を【ＯＦＦ】、input[name="menu"]:checked を【ＯＮ】として扱い、セレクター ~（同階層の後ろの要素）と >（直下の要素）を組み合わせて input タグの状態と各要素の CSS を関連付ける事で処理を分岐させています。
書き換えてみた感想ですが、この方法は Javascript と比べると自由度が低い為、HTML 、CSS の修正が大変でしたが、大掛かりな処理が必要無いのであれば Javascript を使用するよりも楽に実装できると感じました。
実際の動作が気になる方は、テキストデータを丸ごとコピペして確かめてみましょう…！
（簡素な作りですが、感想、アドバイスなどあれば頂けると幸いです）
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。