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