日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は以前自分が作成したサンプルの改善案を紹介します。

###テーマ：アニメーションの動的制御を 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 を使用するよりも楽に実装できると感じました。

実際の動作が気になる方は、テキストデータを丸ごとコピペして確かめてみましょう…！
（簡素な作りですが、感想、アドバイスなどあれば頂けると幸いです）

今回はこれで以上になります。

あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。