本篇內(nèi)容介紹了“用CSS3+HTML5+JS 怎么實(shí)現(xiàn)塊的收縮與展開(kāi)的動(dòng)畫效果”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到馬關(guān)網(wǎng)站設(shè)計(jì)與馬關(guān)網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋馬關(guān)地區(qū)。
最近在做項(xiàng)目時(shí),發(fā)現(xiàn)CSS3中關(guān)于動(dòng)畫的技術(shù),自己很少運(yùn)用在項(xiàng)目中,平時(shí)一些列表塊的收縮和展開(kāi)動(dòng)畫效果,幾乎都是使用 display 的 none 和 block,或者 visibility 的 hidden 和 visible 來(lái)進(jìn)行控制。因此,在最近的項(xiàng)目中,就開(kāi)始深入研究CSS3關(guān)于動(dòng)畫的技術(shù),并且運(yùn)用到了項(xiàng)目中,下面是關(guān)于列表塊的收縮&展開(kāi)動(dòng)畫。
簡(jiǎn)單的一個(gè)效果圖
實(shí)現(xiàn)思路
大體上我們將列表塊分割成 標(biāo)題塊 和 內(nèi)容塊
(1)標(biāo)題塊: 展示標(biāo)題和一個(gè)帶有收縮&展開(kāi)動(dòng)畫效果的圖標(biāo)
①圖標(biāo)部分,我們可以使用偽類來(lái)繪畫出箭頭,并且使用 transform 的旋轉(zhuǎn)屬性 rotate 進(jìn)行圖標(biāo)的方向控制和其動(dòng)畫效果。
②動(dòng)畫控制,通常點(diǎn)擊標(biāo)題部分,列表則收縮&展開(kāi),因此點(diǎn)擊標(biāo)題時(shí),要對(duì)class進(jìn)行控制。
(2)內(nèi)容塊:內(nèi)容塊展示內(nèi)容,且該塊承載了主要的動(dòng)畫效果——列表的收縮&展開(kāi)
①動(dòng)畫效果:該塊的動(dòng)畫,我們的思路是整個(gè)塊的高度收起來(lái),里面的內(nèi)容也向左邊隱藏,因此需要控制高度和動(dòng)畫的隱藏,所以使用 max-height 進(jìn)行高度控制和 transition(設(shè)置動(dòng)畫時(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; } /*使用偽類進(jìn)行圖標(biāo)繪畫*/ .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類控制圖標(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é)名稱</p> </div> <div id="list_wrap" class="node_wrap node_wrap_show"> <p>節(jié)名稱一</p> <p>節(jié)名稱二</p> <p>節(jié)名稱三</p> <p>節(jié)名稱四</p> <p>節(jié)名稱五</p> <p>節(jié)名稱六</p> <p>節(jié)名稱七</p> <p>節(jié)名稱八</p> <p>節(jié)名稱九</p> <p>節(jié)名稱十</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)畫效果 block_wrap.onclick = function() { // 獲取標(biāo)題元素className集合 let classArray = this.className.split(/\s+/) // 獲取內(nèi)容塊元素 let list_wrap = document.getElementById('list_wrap') // 判斷標(biāo)題元素是否有類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)畫效果適應(yīng)移動(dòng)端,PC端會(huì)有點(diǎn)瑕疵,稍微處理即可。
“用CSS3+HTML5+JS 怎么實(shí)現(xiàn)塊的收縮與展開(kāi)的動(dòng)畫效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
新聞標(biāo)題:用CSS3+HTML5+JS怎么實(shí)現(xiàn)塊的收縮與展開(kāi)的動(dòng)畫效果
分享鏈接:http://muchs.cn/article8/pihjip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷、電子商務(wù)、自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)