整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS實現一個高度過度的動畫 ，針對于屬性height，設置一個transition動畫就能實現我們想要看到的效果。而這個高度在實際情況下， 我們并不希望它是一個固定的值，需要做的更靈活一點，比如隨著內容的增減自適應，所以，有人就會想到使用transition將高度從0過度到auto，然而，這樣實現動畫效果會生效嗎？有沒有更優秀的技巧或者方法了？
有的，今天和大家聊一聊這個問題。
文章中講解的DOM結構，如下
效果如下，鼠標移上去的時候，下面這段文字展示（<mark>動畫效果</mark> ）
默認的時候高度設置成0，鼠標移上去的時候，將高度設置成auto，像下面代碼這樣
從效果上來看，這個變化是瞬間的，并沒有500毫秒過度效果。也就是說CSS不能使用transition實現height從0過度到auto。
這不符合我們的預期效果。
竟然auto不能動畫過度，那我們就改成固定的值（最簡單的就是改成數字），比如，從0過度到300。這樣過度效果就生效了。
雖然這樣能過度過去，但這不是一個很優的方法， 因為這樣處理的話，我們得通過JS去計算這個高度，才能確保我們的功能不出BUG。
為什么不試一下最大高度了？
max-height從0到固定值也是可以animation過去的，唯一不太好的地方就是，我們的內容有可能會溢出，畢竟我們設置的只是一個最大的高度。
如果需求能保證內容的高度永遠不會達到一定的值，用這個方法完全沒什么問題。我們只需要設置一個適當的最大高度值就好。
這個時候，網格布局給我們提供了另外一個巧妙的解決方案。
只需要將grid-template-rows從0fr過度到1fr。如此一來，我們的網格項將從0過渡到其'自然'高度。這應該就是比較完美的解決辦法。
代碼如下
功能是實現了，我也不得不關注一下這屬性的兼容性問題。
注意到chrome從107版本開始支持這個屬性。
們可以在不使用JavaScript的情況下創建效果和動畫，這將有助于許多設計師的工作。但我們必須小心避免濫用CSS3，因為舊瀏覽器不支持其所有屬性。
基本了解CSS，特別是CSS3過渡和關鍵幀動畫，非常重要。使用這個簡單的概念，我們將看到如何制作功能圖像滑塊。
CSS3過渡的基本概念
我們可以使用四個過渡屬性：
目前，Safari ，Chrome，Firefox ，Opera 和IE 的最新版都支持CSS3過渡。由于該技術仍然相對較新，因此需要瀏覽器的前綴。到目前為止，每個瀏覽器的語法完全相同，只需要更改前綴。
?
、對transition屬性的認識
1、transition 屬性是一個簡寫屬性，可用于設置四個過渡屬性：
transition-property 過渡效果的 CSS 屬性的名稱（height、width、opacity等）。
transition-duration 完成過渡效果需要時間。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 過渡效果何時開始（延遲時間）。
注：如果 transition-duration屬性時長為 0，就不會產生過渡效果。
2、漸變函數的值：
漸變函數是transition-timing-function； 其中貝塞爾曲線的預設值 ease漸快，勻速，減慢cubic-bezier(0.25,0.1,0.25,1) ease-in漸快，勻速cubic-bezier(0.42,0,1,1) ease-out勻速，減慢cubic-bezier(0,0,0.58,1) ease-in-out和ease類似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1) linear全程勻速cubic-bezier(0,0,1,1)
3、簡寫方式：transition：css屬性名 過度時間 漸變函數值 延遲時間；
二、簡單動畫實例操作
1、先插入兩張圖片
<div class="A"> <img src="img/吃藥.jpg" alt=""> <img src="img/main_bg.jpg" alt=""> </div>
2、給圖片設置樣式
<style>
.A {
margin: auto 100px;
height: 400px;
width: 600px;
position: relative;
}
.A img:nth-child(1) {
height: 300px;
width: 300px;
position: absolute;
}
.A img:nth-child(2) {
height: 300px;
width: 300px;
position: absolute;
transition: opacity 3s ease-in 2s;
}
.A img:nth-child(2):hover {
opacity: 0;
}
img {
height: 300px;
width: 300px;
}
</style>
3、得到的動畫效果是：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
