建站
咨詢
售后
建站咨詢
新聞中心
使用過CSS transition屬性的童鞋們應(yīng)該都清楚，當(dāng)元素在過渡開始或者結(jié)束時的高度為auto時，動畫是不生效的;那么如何才能實現(xiàn)元素高度的改變動畫效果呢?本篇文章將為大家提供一個基于Vue3的非常簡潔的解決方案。
為周至等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及周至網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站制作、周至網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
要實現(xiàn)高度的改變動畫，我們需要在動畫進(jìn)行之前為元素設(shè)置準(zhǔn)確的高度。
當(dāng)元素由可見變?yōu)殡[藏狀態(tài)時，我們需要先獲取元素的計算高度，將其設(shè)置到style屬性上，然后執(zhí)行一個觸發(fā)瀏覽器渲染引擎重繪的動作，然后再將高度設(shè)置為0，這樣高度的改變動畫就會正常進(jìn)行。
當(dāng)元素由隱藏變?yōu)榭梢姞顟B(tài)時，我們需要先將高度設(shè)置為auto，然后獲取元素的計算高度，再將高度設(shè)置為0，然后執(zhí)行一個觸發(fā)瀏覽器渲染引擎重繪的動作，然后再將高度設(shè)置為計算高度，這樣高度的改變動畫就會正常進(jìn)行。
現(xiàn)在，根據(jù)以上實現(xiàn)原理分析，我們創(chuàng)建一個高度的改變動畫通用組件CollapseTransition.vue。該組件非常簡單，僅需30多行代碼。我?guī)缀趺啃写a都有注釋，大家應(yīng)該能看懂吧?
以上就是實現(xiàn)高度的改變動畫的通用組件源碼，童鞋們理解了嗎?是不是非常簡單?現(xiàn)在，我們實現(xiàn)折疊面板組件。使用過element-ui這樣的UI庫的童鞋們應(yīng)該都知道，折疊面板是由兩個組件折疊面板Collapse和折疊面板項CollapseItem組合而成;
現(xiàn)在，我們先實現(xiàn)CollapseItem.vue組件。為了節(jié)省篇幅，我將源碼中的空行全部去掉了，縮進(jìn)比較規(guī)范，自認(rèn)為可讀性還行;源碼如下，一共30多行，我直接在源碼中添加了注釋，就不過多解釋了。
{{ 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)在，我們實現(xiàn)Collapse.vue組件。該組件仍然只有30多行，大家理解起來應(yīng)該很輕松，我就直接在源碼里添加注釋作為講解了。
以上就是折疊面板組件的實現(xiàn)。包括折疊動畫組件，一共僅需不到150行代碼，是不是非常簡單?
網(wǎng)站欄目：Vuejs高度的改變動畫探索：折疊面板Collapse組件的優(yōu)秀實現(xiàn)方案
URL鏈接：http://m.5511xx.com/article/ccccges.html
