前言

W3C標(biāo)準(zhǔn)中對(duì)css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值。”

過(guò)渡transition

先來(lái)看一個(gè)小例子

<div class="demo"></div>

.demo {
    width: 100px;
    height: 100px;
    background-color: royalblue;
}
.demo:hover {
    width: 200px;
}

這樣當(dāng)我的光標(biāo)懸浮在demo的一瞬間

它的寬度變成了200px

有沒(méi)有辦法讓我們光標(biāo)懸浮在元素時(shí)，元素寬度緩慢變寬呢

在CSS3之前我們只能使用麻煩的js腳本

但是現(xiàn)在我們只需要添加一個(gè)屬性

就可以達(dá)到我們的目的

.demo {
    width: 100px;
    height: 100px;
    background-color: royalblue;
    transition: width 1s; /*增*/
}
.demo:hover {
    width: 200px;
}

transition它的作用就是指定當(dāng)你的元素某些樣式發(fā)生變化時(shí)

這些樣式可以漸漸過(guò)渡到最終屬性值

它是一個(gè)復(fù)合屬性

有以下子屬性

      transition-property：指定過(guò)渡或動(dòng)態(tài)模擬的css屬性

      transition-duration：指定過(guò)渡所需要的時(shí)間

      transition-timing-function：指定過(guò)渡函數(shù)

      transition-delay：指定開(kāi)始出現(xiàn)的延遲時(shí)間

transition-property 我們想要哪種屬性過(guò)渡就寫(xiě)哪種屬性

或者干脆寫(xiě)過(guò)渡所有屬性的關(guān)鍵字all

transition-duration漸變時(shí)間屬性值就是“數(shù)字+s”

代表幾秒鐘內(nèi)過(guò)渡

transition-timing-function 是可選的屬性值，有如下可選值

      linear 

      線性過(guò)渡，等價(jià)貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

      ease（默認(rèn)）

      平滑過(guò)渡，等價(jià)貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

      ease-in

      由慢到快，等價(jià)貝塞爾曲線(0.42, 0, 1.0, 1.0)

      ease-out

      由快到慢，等價(jià)貝塞爾曲線(0, 0, 0.58, 1.0)

      ease-in-out

      由慢到快再到慢，等價(jià)貝塞爾曲線(0.42, 0, 0.58, 1.0)

      step-start

      等同 steps(1, start)

      step-end

      等同 steps(1, end)

      steps()：

      兩個(gè)參數(shù)的步進(jìn)函數(shù)。第一個(gè)參數(shù)為正整數(shù)，指定函數(shù)步數(shù)。第二個(gè)參數(shù)取值是start或end，指定每一步的值發(fā)生變化的時(shí)間點(diǎn)。第二個(gè)參數(shù)可選，默認(rèn)值為end。

      cubic-bezier(num, num, num, num)：

      特定的貝塞爾曲線類型，4個(gè)數(shù)值需在[0, 1]區(qū)間內(nèi)

大多我們都用不上，最常用的大概就是我們默認(rèn)的ease和線性過(guò)渡linear了

transition-delay 同樣是可選屬性值

如果你想要延遲過(guò)渡，換句話說(shuō)如果我們想要在過(guò)渡前停一小會(huì)兒

那么就在這個(gè)復(fù)合屬性的最后添加我們需要延遲的時(shí)間“數(shù)字+s”

這個(gè)屬性可以對(duì)多個(gè)不同的屬性進(jìn)行設(shè)置

我們要做的就是使用逗號(hào)隔開(kāi)

.demo {
    width: 100px;
    height: 100px;
    background-color: royalblue;
    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/
}
.demo:hover {
    width: 200px;
    height: 200px;
    background-color: lawngreen; /*改*/
}

鼠標(biāo)移出元素后，元素又過(guò)渡回來(lái)

使用過(guò)渡屬性而不是腳本的另一個(gè)原因是

腳本方法改變多個(gè)元素樣式可能會(huì)產(chǎn)生沖突

解決的辦法是使用bool變量加鎖，還是很麻煩

我們的transition過(guò)渡屬性就不需要考慮這么多

元素與元素之間互不影響

還有一點(diǎn)要注意，元素過(guò)渡需要知道樣式具體的起始屬性和末尾屬性

比如說(shuō)我們例子中的width明確了從100px過(guò)渡到200px

.demo:hover {
    width: auto; /*改*/
    height: 200px;
    background-color: lawngreen; /*改*/
}

改變了懸浮樣式width為auto

我們發(fā)現(xiàn)當(dāng)光標(biāo)懸浮元素后

width屬性并沒(méi)有發(fā)生過(guò)渡

參與過(guò)渡的屬性

當(dāng)然也不是所有的樣式都可以過(guò)渡

比如說(shuō)你想讓 display:block 過(guò)渡到 display:inline-block

那是不可能的

有以下屬性參與過(guò)渡

color
visibility
opacity
vertical-align
z-index
clip
width/height
top/bottom/left/right
background-color/position
border-top/bottom/left/right-color/width
border/letter/word-spacing
font-size/weight
line-height
margin/padding-top/bottom/left/right
max/min-height/width
outline-color/width
text-indent/shadow

可以看到這個(gè)屬性真的是十分強(qiáng)大

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

最新評(píng)論