溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“用CSS3+HTML5+JS 怎么實現(xiàn)塊的收縮與展開的動畫效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
最近在做項目時，發(fā)現(xiàn)CSS3中關(guān)于動畫的技術(shù)，自己很少運用在項目中，平時一些列表塊的收縮和展開動畫效果，幾乎都是使用 display 的 none 和 block，或者 visibility 的 hidden 和 visible 來進(jìn)行控制。因此，在最近的項目中，就開始深入研究CSS3關(guān)于動畫的技術(shù)，并且運用到了項目中，下面是關(guān)于列表塊的收縮&展開動畫。
簡單的一個效果圖
實現(xiàn)思路
大體上我們將列表塊分割成 標(biāo)題塊 和 內(nèi)容塊
（1）標(biāo)題塊： 展示標(biāo)題和一個帶有收縮&展開動畫效果的圖標(biāo)
?、賵D標(biāo)部分，我們可以使用偽類來繪畫出箭頭，并且使用 transform 的旋轉(zhuǎn)屬性 rotate 進(jìn)行圖標(biāo)的方向控制和其動畫效果。
②動畫控制，通常點擊標(biāo)題部分，列表則收縮&展開，因此點擊標(biāo)題時，要對class進(jìn)行控制。
（2）內(nèi)容塊：內(nèi)容塊展示內(nèi)容，且該塊承載了主要的動畫效果——列表的收縮&展開
?、賱赢嬓Ч涸搲K的動畫，我們的思路是整個塊的高度收起來，里面的內(nèi)容也向左邊隱藏，因此需要控制高度和動畫的隱藏，所以使用 max-height 進(jìn)行高度控制和 transition(設(shè)置動畫時間)、transform 的屬性 translate 來進(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)和展開時標(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)容塊的滑動條*/
.node_wrap::-webkit-scrollbar {
display: none;
}
/*控制內(nèi)容塊隱藏 隱藏時，整塊向左邊平移200%的寬度，并且將最大高度設(shè)置為0，否則頁面會留有空白*/
.node_wrap_hide {
transform: translate(-200%, 0);
max-height: 0;
}
/*控制內(nèi)容塊顯示，顯示時，整塊向右邊復(fù)原，并且將最大高度設(shè)置為300px，里面的內(nè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)題元素添加點擊事件，通過點擊控制class的添加&去除達(dá)成動畫效果
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，如若存在，則說明列表展開，這時點擊則是隱藏內(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文件保存后即可看到效果。此動畫效果適應(yīng)移動端，PC端會有點瑕疵，稍微處理即可。
“用CSS3+HTML5+JS 怎么實現(xiàn)塊的收縮與展開的動畫效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼