建站
咨詢
售后
建站咨詢
新聞中心
使用過(guò)CSS transition屬性的童鞋們應(yīng)該都清楚，當(dāng)元素在過(guò)渡開(kāi)始或者結(jié)束時(shí)的高度為auto時(shí)，動(dòng)畫(huà)是不生效的;那么如何才能實(shí)現(xiàn)元素高度的改變動(dòng)畫(huà)效果呢?本篇文章將為大家提供一個(gè)基于Vue3的非常簡(jiǎn)潔的解決方案。
為周至等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及周至網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站制作、周至網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
要實(shí)現(xiàn)高度的改變動(dòng)畫(huà)，我們需要在動(dòng)畫(huà)進(jìn)行之前為元素設(shè)置準(zhǔn)確的高度。
當(dāng)元素由可見(jiàn)變?yōu)殡[藏狀態(tài)時(shí)，我們需要先獲取元素的計(jì)算高度，將其設(shè)置到style屬性上，然后執(zhí)行一個(gè)觸發(fā)瀏覽器渲染引擎重繪的動(dòng)作，然后再將高度設(shè)置為0，這樣高度的改變動(dòng)畫(huà)就會(huì)正常進(jìn)行。
當(dāng)元素由隱藏變?yōu)榭梢?jiàn)狀態(tài)時(shí)，我們需要先將高度設(shè)置為auto，然后獲取元素的計(jì)算高度，再將高度設(shè)置為0，然后執(zhí)行一個(gè)觸發(fā)瀏覽器渲染引擎重繪的動(dòng)作，然后再將高度設(shè)置為計(jì)算高度，這樣高度的改變動(dòng)畫(huà)就會(huì)正常進(jìn)行。
現(xiàn)在，根據(jù)以上實(shí)現(xiàn)原理分析，我們創(chuàng)建一個(gè)高度的改變動(dòng)畫(huà)通用組件CollapseTransition.vue。該組件非常簡(jiǎn)單，僅需30多行代碼。我?guī)缀趺啃写a都有注釋，大家應(yīng)該能看懂吧?
以上就是實(shí)現(xiàn)高度的改變動(dòng)畫(huà)的通用組件源碼，童鞋們理解了嗎?是不是非常簡(jiǎn)單?現(xiàn)在，我們實(shí)現(xiàn)折疊面板組件。使用過(guò)element-ui這樣的UI庫(kù)的童鞋們應(yīng)該都知道，折疊面板是由兩個(gè)組件折疊面板Collapse和折疊面板項(xiàng)CollapseItem組合而成;
現(xiàn)在，我們先實(shí)現(xiàn)CollapseItem.vue組件。為了節(jié)省篇幅，我將源碼中的空行全部去掉了，縮進(jìn)比較規(guī)范，自認(rèn)為可讀性還行;源碼如下，一共30多行，我直接在源碼中添加了注釋，就不過(guò)多解釋了。
{{ title }}
這是CollapseItem.vue組件的樣式。
@import './common/var.scss';
.x-collapse-item {
font-size: 13px;
background-color: #fff;
color: $--color-text-primary;
border-bottom: 1px solid $--border-color-lighter;
&:first-child {
border-top: 1px solid $--border-color-lighter;
}
&_header {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
cursor: pointer;
}
&_content {
line-height: 1.8;
padding-bottom: 25px;
}
&_arrow {
margin-right: 8px;
transition: transform .2s;
&.is-active {
transform: rotate(90deg);
}
}
}
現(xiàn)在，我們實(shí)現(xiàn)Collapse.vue組件。該組件仍然只有30多行，大家理解起來(lái)應(yīng)該很輕松，我就直接在源碼里添加注釋作為講解了。
以上就是折疊面板組件的實(shí)現(xiàn)。包括折疊動(dòng)畫(huà)組件，一共僅需不到150行代碼，是不是非常簡(jiǎn)單?
文章名稱：Vuejs高度的改變動(dòng)畫(huà)探索：折疊面板Collapse組件的優(yōu)秀實(shí)現(xiàn)方案
文章路徑：http://www.fisionsoft.com.cn/article/ccccges.html
