在開(kāi)發(fā)中，我們可能會(huì)遇到需要讓卡片高度由內(nèi)容撐起（即不能手動(dòng)設(shè)置height），并且在高度增加時(shí)增加緩動(dòng)動(dòng)畫(huà)的需求。本文將介紹幾種實(shí)現(xiàn)方式。

方法1：使用CSS的max-height屬性和:hover偽類

我們可以使用CSS的max-height屬性和:hover偽類來(lái)實(shí)現(xiàn)卡片高度增加時(shí)的緩動(dòng)動(dòng)畫(huà)效果。

ps：為什么不使用transition:height 1s。因?yàn)槲覀兛ㄆ母叨瓤績(jī)?nèi)容填充，非CSS限定，故transition+height的組合會(huì)失效。

具體實(shí)現(xiàn)步驟如下：

1. 在CSS中設(shè)置卡片的max-height屬性為一個(gè)較大的值，比如500px。

.card {max-height: 500px;transition: max-height .2s ease-in-out;
}

2. 在:hover時(shí)將max-height設(shè)置為實(shí)際高度（或以上）。

.card:hover {max-height: 1000px; /* 實(shí)際高度 */
}

這樣當(dāng)鼠標(biāo)懸停在卡片上時(shí)，卡片會(huì)平滑地從當(dāng)前高度過(guò)渡到實(shí)際高度，實(shí)現(xiàn)了緩動(dòng)動(dòng)畫(huà)效果。

Tip1：比較好的效果是設(shè)置到實(shí)際的大概高度以上，這樣緩動(dòng)更加平滑。

特定例子：鼠標(biāo)懸浮卡片，顯隱按鈕

Tip2：最好的效果是將限制設(shè)置在動(dòng)態(tài)增長(zhǎng)的子元素上而不是card上。

實(shí)例：限制button的最大高度即可。

核心代碼：

.btn-group{max-height:0px;overflow:hidden;transition:max-height 0.8s;
}
.card:hover .btn-group{max-height:70px;
}

具體代碼可見(jiàn)Codepen:https://codepen.io/yyforreal/pen/RwxxZXN

方法2：使用JavaScript監(jiān)聽(tīng)卡片內(nèi)容變化

我們可以使用JavaScript監(jiān)聽(tīng)卡片內(nèi)容的變化，并在內(nèi)容發(fā)生變化時(shí)更新卡片的高度并增加緩動(dòng)動(dòng)畫(huà)效果。

具體實(shí)現(xiàn)步驟如下：

1. 獲取卡片元素和卡片內(nèi)容元素。

const card = document.querySelector('.card');
const cardContent = document.querySelector('.card-content');

2. 獲取卡片內(nèi)容元素的高度，并將卡片元素的高度設(shè)置為卡片內(nèi)容元素的高度。

const contentHeight = cardContent.offsetHeight;
card.style.height = `${contentHeight}px`;

3. 監(jiān)聽(tīng)卡片內(nèi)容元素的變化，并根據(jù)內(nèi)容高度的變化來(lái)更新卡片的高度。

const observer = new MutationObserver(() => {const newContentHeight = cardContent.offsetHeight;if (newContentHeight !== contentHeight) {card.style.height = `${newContentHeight}px`;}
});
observer.observe(cardContent, { childList: true, subtree: true });

4. 在CSS中設(shè)置卡片的過(guò)渡效果。

.card {transition: height .2s ease-in-out;
}

這樣當(dāng)卡片內(nèi)容發(fā)生變化時(shí)，卡片的高度會(huì)自動(dòng)調(diào)整，并且會(huì)有過(guò)渡效果實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)。

方法3：使用CSS的transform屬性

我們還可以使用CSS的transition和transform屬性來(lái)實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)效果。

具體實(shí)現(xiàn)步驟如下：

1. 在CSS中設(shè)置卡片的transform屬性為scaleY(0)和scaleY(1)，并且設(shè)置transform-origin為top。

.card {transform: scaleY(0);transform-origin: top;transition: transform .2s ease-in-out;
}
.card.show {transform: scaleY(1);
}

2. 使用JavaScript監(jiān)聽(tīng)卡片內(nèi)容的變化，并在內(nèi)容發(fā)生變化時(shí)，將卡片的class設(shè)置為show。這樣卡片就會(huì)從高度為0的狀態(tài)緩動(dòng)到實(shí)際高度的狀態(tài)。

const card = document.querySelector('.card');
const cardContent = document.querySelector('.card-content');new MutationObserver(() => {card.classList.add('show');
}).observe(cardContent, { childList: true, subtree: true });

這樣就可以實(shí)現(xiàn)卡片高度增加時(shí)的緩動(dòng)動(dòng)畫(huà)效果了。

以上就是幾種實(shí)現(xiàn)卡片高度增加時(shí)的緩動(dòng)動(dòng)畫(huà)效果的方法，開(kāi)發(fā)時(shí)可以根據(jù)實(shí)際需求選擇適合的方式。