CSS3+HTML5+JS 實(shí)現(xiàn)一個(gè)塊的收縮與展開(kāi)動(dòng)畫(huà)效果

發(fā)布時(shí)間：2020-11-17 15:03:30 作者：String_HelloWorld

這篇文章主要介紹了CSS3+HTML5+JS 實(shí)現(xiàn)一個(gè)塊的收縮與展開(kāi)動(dòng)畫(huà)效果,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近在做項(xiàng)目時(shí)，發(fā)現(xiàn)CSS3中關(guān)于動(dòng)畫(huà)的技術(shù)，自己很少運(yùn)用在項(xiàng)目中，平時(shí)一些列表塊的收縮和展開(kāi)動(dòng)畫(huà)效果，幾乎都是使用 display 的 none 和 block，或者 visibility 的 hidden 和 visible 來(lái)進(jìn)行控制。因此，在最近的項(xiàng)目中，就開(kāi)始深入研究CSS3關(guān)于動(dòng)畫(huà)的技術(shù)，并且運(yùn)用到了項(xiàng)目中，下面是關(guān)于列表塊的收縮&展開(kāi)動(dòng)畫(huà)。

簡(jiǎn)單的一個(gè)效果圖

實(shí)現(xiàn)思路

大體上我們將列表塊分割成 標(biāo)題塊 和 內(nèi)容塊

（1）標(biāo)題塊： 展示標(biāo)題和一個(gè)帶有收縮&展開(kāi)動(dòng)畫(huà)效果的圖標(biāo)

　?、賵D標(biāo)部分，我們可以使用偽類(lèi)來(lái)繪畫(huà)出箭頭，并且使用 transform 的旋轉(zhuǎn)屬性 rotate 進(jìn)行圖標(biāo)的方向控制和其動(dòng)畫(huà)效果。

　　②動(dòng)畫(huà)控制，通常點(diǎn)擊標(biāo)題部分，列表則收縮&展開(kāi)，因此點(diǎn)擊標(biāo)題時(shí)，要對(duì)class進(jìn)行控制。

（2）內(nèi)容塊：內(nèi)容塊展示內(nèi)容，且該塊承載了主要的動(dòng)畫(huà)效果——列表的收縮&展開(kāi)

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

完整代碼如下：

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

    //給標(biāo)題元素添加點(diǎn)擊事件，通過(guò)點(diǎn)擊控制class的添加&去除達(dá)成動(dòng)畫(huà)效果
     block_wrap.onclick = function() {
        // 獲取標(biāo)題元素className集合
        let classArray = this.className.split(/\s+/)

        // 獲取內(nèi)容塊元素
        let list_wrap = document.getElementById('list_wrap')
 
        // 判斷標(biāo)題元素是否有類(lèi)active，如若存在，則說(shuō)明列表展開(kāi)，這時(shí)點(diǎn)擊則是隱藏內(nèi)容塊，否則顯示內(nèi)容塊
         if (classArray.includes('active')) {
            // 隱藏內(nèi)容塊
            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 {
           // 顯示內(nèi)容塊
            block_wrap.classList.add('active')
            list_wrap.classList.add('node_wrap_show')
            list_wrap.classList.remove('node_wrap_hide')
            return
         }
     }
 </script>
 </html>

以上代碼直接復(fù)制到HTML文件保存后即可看到效果。此動(dòng)畫(huà)效果適應(yīng)移動(dòng)端，PC端會(huì)有點(diǎn)瑕疵，稍微處理即可。

到此這篇關(guān)于CSS3+HTML5+JS 實(shí)現(xiàn)一個(gè)塊的收縮與展開(kāi)動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)html5展開(kāi)收縮動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！