CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術をほとんど使用していないことに気付きました。通常、一部のリストブロックの縮小および拡大アニメーション効果は、ほとんどの場合、 displayのnoneとblock 、またはvisibilityのhiddenとvisibleによって制御されていました。そこで、最近のプロジェクトでは、CSS3 アニメーション技術を徹底的に研究し、プロジェクトに適用しました。以下は、リストブロックの縮小と拡大のアニメーションです。

シンプルな効果図

実装のアイデア

一般的に、リストブロックはタイトルブロックとコンテンツブロックに分けられます。

（1）タイトルブロック：タイトルとアイコンを表示し、縮小・拡大アニメーション効果を付加します。

①アイコン部分では、疑似クラスを使用して矢印を描画し、 transformのrotationプロパティを使用してアイコンの方向とアニメーション効果を制御できます。

　　②アニメーション制御、通常タイトルをクリックするとリストが縮小・拡大するので、タイトルをクリックしたときにクラスを制御する必要があります。

（２）コンテンツブロック：コンテンツブロックはコンテンツを表示し、リストの縮小と拡大という主なアニメーション効果を実行します。

① アニメーション効果: このブロックのアニメーションでは、ブロック全体の高さを縮小し、左側のコンテンツを非表示にすることを考えています。そのため、高さを制御してアニメーションを非表示にする必要があります。そのため、高さの制御にはmax-heightを使用し、 transition (アニメーション時間の設定) と transform の属性translate を使用してコンテンツを非表示にします。

完全なコードは次のとおりです。

<!DOCTYPE html>
   <html>
   <ヘッド>
       <タイトル></タイトル>
       <スタイル タイプ="text/css">
           .block_wrap {
               幅: 500ピクセル;
               マージン: 0 自動;
               境界線: 1px 実線 #e3e3e3;
              境界線の半径: 10px;
          }
          .chapter_wrap {
              背景: 白;
             テキスト配置: 左;
             境界線の半径: 8px;
            色: #333333;
            下部マージン: 15px;
             フォントサイズ: 14px;
           オーバーフロー: 非表示;
       }
       .title_item_wrap {
             パディング: 10px 10px 10px 0;
           マージン: 0 10px 0 10px;
           下部境界線: なし;
            ディスプレイ: フレックス;
             アイテムの位置を中央揃えにします。
        }
         /*アイコンの描画に疑似クラスを使用する*/
         .title_item_wrap::after {
            コンテンツ： '';
            幅: 10px;
             高さ: 10px;
             上境界線: 2px 実線 #999999;
             右境界線: 2px 実線 #999999;
            変換: 回転(-45度);
            表示: インラインブロック;
           遷移: 0.3秒;
            フロート: 右;
            上マージン: 10px;
       }
        /* アクティブクラスを使用して、展開時のアイコンとタイトルの下の境界線の回転を制御します */
        。アクティブ {
             下境界線: 1px 実線 #F0F0F0;
        }
        .active::after{
            変換: 回転(135度);
            上マージン: 5px;
         }
        .章のタイトル {
             フォントサイズ: 16px;
             パディング: 0;
            マージン: 0;
             幅: calc(100% - 30px);
        }
         .node_wrap {
             オーバーフロー: 非表示;
             overflow-y: スクロール;
             遷移: 0.3秒;
         }
         .node_wrap p {
           パディング: 0 20px 5px 20px;
            マージン: 10px 0;
            下境界線: 1px 実線 #e3e3e3
        }
        /*コンテンツブロックのスライダーを非表示にする*/
        .node_wrap::-webkit-スクロールバー {
            表示: なし;
        }
        /*コンテンツ ブロックの非表示を制御します。非表示の場合、ブロック全体が幅の 200% 左に移動し、最大高さは 0 に設定されます。それ以外の場合は、ページは空白のままになります。*/
        .node_wrap_hide {
             変換: translate(-200%, 0);
             最大高さ: 0;
        }
        /*コンテンツブロックの表示を制御します。表示されると、ブロック全体が右に復元され、最大の高さは 300px に設定されます。内部のコンテンツによってブロックが拡張されます*/
        .node_wrap_show {
            変換: translate(0, 0);
          最大高さ: 300px;
       }
    </スタイル>
 </head>
 <本文>
    <div class="block_wrap">
        <div id="block_wrap" class="title_item_wrap アクティブ">
            <p class="chapter_title">章名</p>
        </div>
        <div id="list_wrap" class="node_wrap node_wrap_show">
             <p>セクション名 1</p>
            <p>セクション名 2</p>
           <p>セクション名 3</p>
           <p>セクション名 4</p>
             <p>セクション名 5</p>
            <p>セクション名 6</p>
            <p>セクション名 7</p>
             <p>セクション名 8</p>
             <p>セクション名 9</p>
            <p>セクション名 10</p>
       </div>
     </div>
 </本文>
 <script type="text/javascript">
     // タイトル要素を取得します var block_wrap = document.getElementById('block_wrap')

    //タイトル要素にクリックイベントを追加し、クリックによるコントロールクラスの追加と削除によってアニメーション効果を実現します。block_wrap.onclick = function() {
        // タイトル要素のクラス名コレクションを取得します。let classArray = this.className.split(/\s+/)

        // コンテンツブロック要素を取得する let list_wrap = document.getElementById('list_wrap')
 
        // タイトル要素にクラス active があるかどうかを判定します。ある場合、リストが展開されていることを意味します。クリックするとコンテンツ ブロックが非表示になり、そうでない場合はコンテンツ ブロックが表示されます if (classArray.includes('active')) {
            //コンテンツブロックを非表示にする block_wrap.classList.remove('active')
             list_wrap.classList.remove('node_wrap_show')
           list_wrap.classList.add('node_wrap_hide')
             console.log(this.className.split(/\s+/))
             戻る
        } それ以外 {
           // コンテンツブロックを表示 block_wrap.classList.add('active')
            list_wrap.classList.add('node_wrap_show')
            list_wrap.classList.remove('node_wrap_hide')
            戻る
         }
     }
 </スクリプト>
 </html>

上記のコードを HTML ファイルに直接コピーして保存し、効果を確認してください。このアニメーション効果はモバイルデバイスに適しています。PC 側では多少の欠陥がありますが、多少処理できます。

CSS3+HTML5+JS を使用してブロックの縮小および拡大アニメーション効果を実現する方法についての記事はこれで終わりです。関連する HTML5 拡大および縮小アニメーションコンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux で AutoFs マウントサービスをインストールするチュートリアル

>>: JS を使用した簡単な雪効果の例の詳細な説明