用CSS3+HTML5+JS怎么實現塊的收縮與展開的動畫效果

本篇內容介紹了“用CSS3+HTML5+JS 怎么實現塊的收縮與展開的動畫效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

站在用戶的角度思考問題，與客戶深入溝通，找到馬關網站設計與馬關網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：網站設計、網站制作、企業官網、英文網站、手機端網站、網站推廣、域名與空間、虛擬主機、企業郵箱。業務覆蓋馬關地區。

最近在做項目時，發現CSS3中關于動畫的技術，自己很少運用在項目中，平時一些列表塊的收縮和展開動畫效果，幾乎都是使用 display 的 none 和 block，或者 visibility 的 hidden 和 visible 來進行控制。因此，在最近的項目中，就開始深入研究CSS3關于動畫的技術，并且運用到了項目中，下面是關于列表塊的收縮&展開動畫。

簡單的一個效果圖

用CSS3+HTML5+JS 怎么實現塊的收縮與展開的動畫效果

實現思路

大體上我們將列表塊分割成 標題塊 和 內容塊

（1）標題塊： 展示標題和一個帶有收縮&展開動畫效果的圖標

①圖標部分，我們可以使用偽類來繪畫出箭頭，并且使用 transform 的旋轉屬性 rotate 進行圖標的方向控制和其動畫效果。

　　②動畫控制，通常點擊標題部分，列表則收縮&展開，因此點擊標題時，要對class進行控制。

（2）內容塊：內容塊展示內容，且該塊承載了主要的動畫效果——列表的收縮&展開

①動畫效果：該塊的動畫，我們的思路是整個塊的高度收起來，里面的內容也向左邊隱藏，因此需要控制高度和動畫的隱藏，所以使用 max-height 進行高度控制和 transition(設置動畫時間)、transform 的屬性 translate 來進行內容的隱藏

完整代碼如下：

<!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;
        }
         /*使用偽類進行圖標繪畫*/
         .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;
       }
        /*使用類acitve類控制圖標的旋轉和展開時標題的下邊界*/
        .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
        }
        /*隱藏內容塊的滑動條*/
        .node_wrap::-webkit-scrollbar {
            display: none;
        }
        /*控制內容塊隱藏 隱藏時，整塊向左邊平移200%的寬度，并且將最大高度設置為0，否則頁面會留有空白*/
        .node_wrap_hide {
             transform: translate(-200%, 0);
             max-height: 0;
        }
        /*控制內容塊顯示，顯示時，整塊向右邊復原，并且將最大高度設置為300px，里面的內容即會將塊撐開*/
        .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">章節名稱</p>
        </div>
        <div id="list_wrap" class="node_wrap node_wrap_show">
             <p>節名稱一</p>
            <p>節名稱二</p>
           <p>節名稱三</p>
           <p>節名稱四</p>
             <p>節名稱五</p>
            <p>節名稱六</p>
            <p>節名稱七</p>
             <p>節名稱八</p>
             <p>節名稱九</p>
            <p>節名稱十</p>
       </div>
     </div>
 </body>
 <script type="text/javascript">
     // 獲取標題元素
   var block_wrap = document.getElementById('block_wrap')

    //給標題元素添加點擊事件，通過點擊控制class的添加&去除達成動畫效果
     block_wrap.onclick = function() {
        // 獲取標題元素className集合
        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+/))
             return
        } else {
           // 顯示內容塊
            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 怎么實現塊的收縮與展開的動畫效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

新聞標題：用CSS3+HTML5+JS怎么實現塊的收縮與展開的動畫效果
分享鏈接：http://m.kartarina.com/article8/pihjip.html

成都網站建設公司_創新互聯，為您提供網站營銷、電子商務、自適應網站、關鍵詞優化、響應式網站、云服務器

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容