實現效果：鼠標懸浮按鈕，高度過渡出現如圖所示文本框
代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.button {width: 70px;line-height: 40px;height: 40px;margin: 10px auto;border: 2px solid gold;background-color: rgb(87, 202, 11);border-radius: 5px;text-align: center;color: #fff;font-weight: bolder;display: block;cursor: pointer;box-sizing: border-box;position: relative;}.content {width: 400px;margin: 0px auto;line-height: 30px;background-color: cornflowerblue;color: #fff;font-size: 18px;font-weight: bolder;margin-top: 10px;border-radius: 25px;text-align: center;transition: 1s;height: 0px;overflow: hidden;/* 差值算法針對一些尺寸的關鍵字有作用，瀏覽器內部會將關鍵字計算出具體的數值，然后去實現過渡 *//* interpolate-size: allow-keywords; *//* 差值算法只針對數值有作用，這個是默認值，所以過渡效果也只針對數值才能產生效果 *//* interpolate-size: numeric-only; */}.content.active {/* 根據尺寸關鍵字算出實際尺寸，size則為實際尺寸，還可以在size上面操作，例如calc-size(auto, size + 10px) */height: calc-size(auto, size);}</style>
</head>
<body><div class="button">展開詳情<div style="position: absolute;top: 10px; left: 10px;">111</div></div><div class="content"><div></div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque, culpa unde est animi consequatur iste eum eius sunt odit officia laboriosam expedita officiis mollitia doloribus possimus recusandae corrupti. Tempora, distinctio!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe voluptatem recusandae sapiente suscipit voluptate repudiandae vero in! Saepe, libero veritatis similique blanditiis explicabo voluptatum fuga dignissimos ratione quas! Molestias, itaque.</div><script>var button = document.querySelector('.button');const content = document.querySelector('.content');// button.onmouseenter = () => {// // 這兩行代碼完全只是為了算出內容展開后，元素的高度，好讓高度從0到實際高度來實現過渡效果// content.style.height = 'auto';// const { height } = content.getBoundingClientRect();// content.style.height = '0px';// content.clientHeight; // 強制回流// content.style.height = `${height}px`;// }// button.onmouseleave = () => {// content.style.height = '0px';// }button.onmouseenter = () => {content.classList.add('active');}button.onmouseleave = () => {content.classList.remove('active');}</script>
</body>
</html>
-
思路一：height: 0；-》height: auto; 過渡只針對數值屬性有效果，這種過渡效果無法出現。
-
思路二：max-height: 0；-》max-height: 1000px;這種有兩個缺點，一個是不能完全保證內容高度最后不超過設置的1000px；第二就是過渡效果是從0-》1000，可能假設需要1s，但實際內容高度是500px的話，那么肉眼看起來的過渡時間只有0.5s；移出按鈕時，從1000-》500這個過渡過程肉眼是不可見的，假設需要耗費0.5s，那么肉眼感受到的效果就是頁面卡了0.5s才開始將內容收起來(文本框消失的過程)。總結就是移出效果會受到影響。
-
思路三：js設置height:auto算出內容實際高度，后立馬設置高度為0，然后強制回流渲染，最后設置內容為實際高度，從而實現過渡。
-
思路四：使用interpolate-size，兼容性不好。
- 思路五：calc-size(auto, size)，兼容性不好
)
