不定高元素動畫實現方案（中）
前情
最近小程序接了一個需求，需要實現一個列表，列表可展開收起，展開收起需要有一個動畫效果，而列表個數不定且每項內容高度也不固定，所以是一個不定高的收起展開效果，于是特意抽時間嘗試了一些動畫實現方案，特此記錄
通過scale來實現
通過css3的transform:scaleY()來實現，就是設置內容的縮放從0到1,這里有一個小技巧，默認縮放是相對于元素的正中心，這里要設置相對于頂邊來實現動畫，通過transform-origin來修改變換中心點
關鍵代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="inner">
<div class="header">header</div>
<ul class="list">
<li>scale111111111</li>
<li>scale2222222222</li>
<li>scale333333333</li>
<li>scale444444444</li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
overflow: hidden;
}
.container:hover .list{
transform:scaleY(1)
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
transition: transform .4s;
transform:scaleY(0);
transform-origin:top center;
}
演示地址：https://jsbin.com/haxatotohi/edit?html,css,output
注意：
此縮放屬性兼容性已經非常好了，可以大但使用，但是它的動畫方式相比修改亮度過渡不是特別好看，能看到內容明顯的壓扁縮放過程，但是它是性能最好的，因為修改transform不會引起回流，如果這種效果產品能接受，優先使用此種方式
通過interpolate-size來實現
interpolate-size屬性允許在 CSS 中對尺寸相關的屬性進行插值計算，從而實現過渡動畫效果
可設置的屬性有兩個值：numeric-only（數字） 和 allow-keywords（關鍵字）
默認過渡動畫只能針對數字，如果想對如auto/fill-content/max-content等關鍵字做動畫就得把interpolate-size設置為allow-keywords
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="inner">
<div class="header">header</div>
<ul class="list">
<li>interpolate-size111111111</li>
<li>interpolate-size2222222222</li>
<li>interpolate-size333333333</li>
<li>interpolate-size444444444</li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 48px;
overflow: hidden;
transition:all .4s;
interpolate-size: allow-keywords
}
.container:hover{
height: auto;
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
}
演示地址：https://jsbin.com/nucinaleva/edit?html,css,output
注意：
interpolate-size是新出的css就是為了解決關鍵詞過渡動畫的，但目前兼容性非常差，如果你是做后臺管理項目或者electron桌面端項目可以用用，當然用在項目中也是無防的對于支持的就有過渡，不支持的就無過渡，這叫做優雅降級
通過calc-size來實現
calc-size() CSS function 允許您對固有值執行計算，例如 auto 、 fit-content 和 max-content ；常規 calc() 函數不支持此功能
calc-size() 返回值也可以是插值的 ，從而允許在 animations 和 transitions 中使用 size 關鍵字值。實際上，在屬性值中包含 calc-size() 會自動將 interpolate-size: allow-keywords 應用于選擇
關鍵代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="inner">
<div class="header">header</div>
<ul class="list">
<li>calc-size111111111</li>
<li>calc-size2222222222</li>
<li>calc-size333333333</li>
<li>calc-size444444444</li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 48px;
overflow: hidden;
transition:all .4s;
}
.container:hover{
height: calc-size(auto, size);
}
.header{
width: 100%;
height: 48px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.list{
background-color: green;
}
演示地址：https://jsbin.com/gedezajoni/edit?html,css,output
注意：
兼容性有些差，如果你是做后臺管理項目或者electron桌面端項目可以用用，當然用在項目中也是無防的對于支持的就有過渡，不支持的就無過渡，這叫做優雅降級
小結
對于做技術的我們，每天都是提出問題解決問題的一個過程，過程中會嘗試各種方案，因為解決問題的方案千千萬，此篇文章記錄了實現不定高內容過渡效果的另外三種實現方式，怕篇幅太長，此文暫時寫這么多，下篇繼續……
浙公網安備 33010602011771號