表示内容に覆い被さるように別のブロックを表示する

投稿日：2022年02月11日 00時08分04秒
更新日：2022年03月03日 09時32分32秒

デモ

説明・補足・注意事項

開くボタンを押すとピンク色のブロックが右から覆いかぶさるように出てきます。
閉じるボタンを押すと覆いかぶさっているブロックが右に消えていきます。

change_viewActive(string, bool = null)

function viewChange_rightIn(objname, ViewFlg = null){

    target = $("#" + objname); // 対象のタグを取得

    searchClass = 'active-rightMoveIn'; /* right: 0 を指定しているクラス名 */

    target.css('position', 'absolute'); /* 覆い被せるために必要 */
    target.css('top', '0');
    target.css('transition', 'all 0.6s'); /* 動作について */
    
    if( (ViewFlg == false || target.hasClass(searchClass)) || (ViewFlg=== null && target.hasClass(searchClass)) ){
        target.css('right', '-120%');
        target.css('z-index', '0');
        target.removeClass(searchClass); //表示する用のクラスを除去
    }
    else if( (ViewFlg == true || target.hasClass(searchClass) == false) || (ViewFlg=== null && target.hasClass(searchClass) == false) ){
        target.css('right', '0%');
        target.css('z-index', '9');
        target.toggleClass(searchClass);　//表示する用のクラスを付与
    }

    return;
}

説明

やっていることは指定されたタグの表示位置を固定し、画面の外側に持って行ったり内側に入れたりをしています。詳細は以下に記載します。

「target.css(‘position’, ‘absolute’);」で表示位置を固定指定にする
「target.css(‘top’, ‘0’);」で覆い被さるように位置を指定。
「target.css(‘transition’, ‘all 0.6s’);」で動き方を定義。ここでは全ての動作を0.6秒で終わらせるように設定
指定id値を持つタグに「active-rightMoveIn」クラスがついている場合、「top: 0; right: -120%;」というスタイルを設定する。その後「active-rightMoveIn」クラスを除去する。
指定id値を持つタグに「active-rightMoveIn」クラスがついていない場合、「top: 0; right: 0%;」というスタイルを設定する。その後「active-rightMoveIn」クラスを付与する。

また上記関数のtarget.css(‘right’, *)という箇所の「right」を「left」などに変えると左から出たり入ったりさせることもできます。もう少し弄れば左から入って右に出ていくなんてこともできるでしょう。

ただ上記関数を追加してイベントに設定したところで最初は普通に表示されてしまいます。CSSで「top: 0; right: -120%;」を記載するのもいいですが、以下のように読み込み完了時に実行するように設定しておくとjavascriptのみで実装が可能です。

javascriptとCSSを分けたい場合

上記関数ではjavascriptでstyleを設定していました。これって人によっては嫌いだったりすることもあるかと思います。そこで「javascriptではクラスの付与と除去を行い、そのクラスのstyleはcssに書く」をしようとした場合について以下に記載します。

function viewChange_rightIn(objname, ViewFlg = null){

    target = $("#" + objname); // 対象のタグを取得

    var class_moveIn = 'active-rightMoveIn';   // 表示用のクラス名
    var class_moveOut = 'active-rightMoveOut'; // 非表示用のクラス名

    target.addClass('slidBox');　//対象に対して共通でつけるクラス
    
    if( (ViewFlg == false || target.hasClass(class_moveIn )) || (ViewFlg=== null && target.hasClass(class_moveIn )) ){
        target.removeClass(class_moveIn );   //表示用のクラス名を除去
        target.addClass(class_moveOut );　//非表示用クラス名を付与
    }
    else if( (ViewFlg == true || target.hasClass(class_moveOut) ) || (ViewFlg=== null && target.hasClass(class_moveOut )) ){
        target.removeClass(class_moveOut ); //非表示用クラス名を除去
        target.addClass(class_moveIn );　//表示用のクラス名を付与
    }

    return;
}

/*------------------------ 
表示/非表示を切り替えたいタグに以下を設定
------------------------*/
.slidBox{
    position: absolute;   /* 上から被せて表示するようにpositionを変更 */
    transition: all 0.6s; /* 動き */
    z-index: 999;         /* 最前面に */
}

/*------------------------ 
 javascriptの付与/除去するクラスのスタイル
 ------------------------ */
.active-rightMoveOut{
    top: 0 !important;
    right: -120% !important;
}
.active-rightMoveIn{
    top: 0 !important;
    right: 0 !important;
}