BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実装する。

2022-02-02 09:22:07

最近、あるプロジェクトを進めていて、CSS3のアニメーション技術をほとんど使っていないことに気がつきました。  表示  その  なし  と  ブロック または  視認性  の  隠された  と  可視  を使って制御します。そこで、最近のプロジェクトでは、アニメーションに関するCSS3のテクニックを掘り下げて応用するようになり、リストブロックの収縮 & 展開のアニメーションをご紹介しています。

簡単なレンダリング

実装のアイデア

大雑把に言うと、リストブロックを  ヘッダーブロック  と  コンテンツブロック

(1) タイトルブロック  タイトルとアイコンをshrink&expandのアニメーション効果で表示する

　　(1) アイコンの部分は、擬似クラスを使って矢印を描き、その上に  トランスフォーム  の回転プロパティは  回転  アイコンの向きとアニメーションを制御する .

アニメーション制御、通常はタイトル部をクリックするとリストが縮小＆amp;拡大するので、タイトル部をクリックした時のクラスを制御する。

(2)コンテンツブロック。 コンテンツブロックはコンテンツを表示し、ブロックは主なアニメーション効果であるリストの収縮 & 展開をホストします。

　　(1) アニメーション効果。このブロックのアニメーションは、ブロック全体の高さが閉じられ、中のコンテンツが左に隠れるというもので、高さとアニメーションの隠れを制御する必要があるので  マックスハイト  高さ制御のために  transition(アニメーション時間設定)、transformのプロパティ  トランスレート  をクリックすると、コンテンツが非表示になります。

コードの全文は以下の通りです。 

<!DOCTYPE html>
   <html>
   <head>
       <title></title>
       <style type="text/css">
           .block_wrap {
               width: 500px;
               margin: 0 auto;
               border: 1px solid #e3e3e3;
              border-radius: 10px;
          }
          .chapter_wrap {
              background: white;
             text-align: left;
             border-radius: 8px;
            color: #333333;
            margin-bottom: 15px;
             font-size: 14px;
           overflow: hidden;
       }
       .title_item_wrap {
             padding: 10px 10px 10px 0;
           margin: 0 10px 0 10px;
           border-bottom: none;
            display: flex;
             align-items: center;
        }
         /* icon drawing using pseudo-classes*/
         .title_item_wrap::after {
            content: '';
            width: 10px;
             height: 10px;
             border-top: 2px solid #999999;
             border-right: 2px solid #999999;
            transform: rotate(-45deg);
            display: inline-block;
           transition: 0.3s;
            float: right;
            margin-top: 10px;
       }
        /* Use the acitve class to control the rotation of the icon and the lower border of the title when expanded*/
        .active {
             border-bottom: 1px solid #F0F0F0;
        }
        .active::after {
            transform: rotate(135deg);
            margin-top: 5px;
         }
        .chapter_title {
             font-size: 16px;
             padding: 0;
            margin: 0;
             width: calc(100% - 30px);
        }
         .node_wrap {
             overflow: hidden;
             overflow-y: scroll;
             transition: 0.3s;
         }
         .node_wrap p {
           padding: 0 20px 5px 20px;
            margin: 10px 0;
            border-bottom: 1px solid #e3e3e3
        }
        /* Hide the slider for the content block */
        .node_wrap::-webkit-scrollbar {
            display: none;
        }
        /* control content block hide When hidden, the whole block is panned 200% to the left and the maximum height is set to 0, otherwise the page will be left blank */
        .node_wrap_hide {
             transform: translate(-200%, 0);
             max-height: 0;
        }
        /* control the display of the content block, when displayed, the whole block is restored to the right, and the maximum height is set to 300px, the content inside the block will be propped up */
        .node_wrap_show {
            transform: translate(0, 0);
          max-height: 300px;
       }
    </style>
 </head>
 <body>
    <div class="block_wrap">
        <div id="block_wrap" class="title_item_wrap active">
            <p class="chapter_title">chapter_name</p>
        </div>
        <div id="list_wrap" class="node_wrap node_wrap_show">
             <p>section name one</p>
            <p>Section name II</p>
           <p>Section name III</p>
           <p>Section name IV</p>
             <p>Section name V</p>
            <p>Section name VI</p>
            <p>Section name VII</p>
             <p>Section name VIII</p>
             <p>Section name IX</p>
            <p>Section name X</p>
       </div>
     </div>
 </body>
 <script type="text/javascript">
     // Get the header element
   var block_wrap = document.getElementById('block_wrap')

    // Add a click event to the title element to control the addition & removal of the class by clicking to achieve the animation effect
     block_wrap.onclick = function() {
        // get the title element className collection
        let classArray = this.className.split(/\s+/)

        // Get the content block elements
        let list_wrap = document.getElementById('list_wrap')
 
        // determine whether the title element has class active, if it exists, then the list is expanded, then click it to hide the content block, otherwise show the content block
         if (classArray.includes('active')) {
            // Hide the content block
            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+/))
             return
        } else {
           // Display the content block
            block_wrap.classList.add('active')
            list_wrap.classList.add('node_wrap_show')
            list_wrap.classList.remove('node_wrap_hide')
            return
         }
     }
 </script>
 </html>

上記のコードは、HTMLファイルに直接コピーして保存すると、効果を確認することができます。このアニメーション効果はモバイルに適応しており、PCでは少し欠点が出ますが、少しの加工で対応可能です。

CSS3+HTML5+JSで収縮と膨張のブロックのアニメーション効果を達成することについて、この記事を紹介し、より関連するHTML5伸縮アニメーションコンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します