CSS3實(shí)現(xiàn)偽類hover離開(kāi)時(shí)平滑過(guò)渡效果

luck 發(fā)布于2019-08-29 13:07 / 1259人閱讀

摘要：離開(kāi)時(shí)效果生硬由于元素只有在偽類觸發(fā)的時(shí)候，效果才能加到元素上。簡(jiǎn)單解決在此處留一個(gè)就夠了去掉這個(gè)這只是最簡(jiǎn)單的動(dòng)畫(huà)實(shí)現(xiàn)，但對(duì)于目前大部分需求來(lái)說(shuō)，配合配合貝塞爾曲線，已經(jīng)足夠用了。

由于hover偽類添加的動(dòng)畫(huà)效果，僅當(dāng)鼠標(biāo)放在元素上時(shí)會(huì)被觸發(fā)，而當(dāng)鼠標(biāo)離開(kāi)時(shí)，效果會(huì)中斷，會(huì)顯得很生硬。
大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。其實(shí)不必這么麻煩，CSS3便可以幫你解決這些問(wèn)題。

 
    
    
        
        
        
        離開(kāi)時(shí)效果生硬

由于div元素只有在:hover偽類觸發(fā)的時(shí)候，效果才能加到div元素上。

當(dāng)鼠標(biāo)離開(kāi)div元素的時(shí)候，:hover偽類將不再生效，瞬間丟掉hover里寫(xiě)的動(dòng)畫(huà)效果。

此時(shí)，我們應(yīng)當(dāng)在原本元素上再寫(xiě)一個(gè)一模一樣的transition效果，將離開(kāi)斷掉的動(dòng)畫(huà)效果續(xù)接上。

此時(shí)，不管鼠標(biāo)在什么時(shí)候離開(kāi)元素，都會(huì)原樣返回。

但此時(shí)會(huì)有一個(gè)問(wèn)題，鼠標(biāo)放上去，立馬離開(kāi)，或者鼠標(biāo)從上邊勻速劃過(guò)，div回到原樣的時(shí)間，依舊是1s。

其實(shí)，我們?cè)趆over里寫(xiě)的transition:all 1s linear完全是多余的。

transition有一個(gè)特性，只要是帶有數(shù)值類型的屬性（例如：% , rgba() , rgb() , hsla() , 數(shù)字等），在其發(fā)生變化的時(shí)候，均會(huì)被觸發(fā)動(dòng)畫(huà)效果。

因此，不管:hover偽類什么時(shí)候丟掉我的動(dòng)畫(huà)，也不管我:hover時(shí)，元素動(dòng)畫(huà)走到了什么地步。只要元素本身帶有transitioin，該動(dòng)畫(huà)便會(huì)從當(dāng)前動(dòng)畫(huà)執(zhí)行到的地方，以相同的時(shí)間返回原樣。

這只是最簡(jiǎn)單的動(dòng)畫(huà)實(shí)現(xiàn)，但對(duì)于目前大部分需求來(lái)說(shuō)，配合配合貝塞爾曲線，已經(jīng)足夠用了。

你僅僅需要做到，hover中的最終樣式，保證為數(shù)值樣式變OK了。

像display:block變?yōu)閐isplay:none就不好使了，此時(shí)我們可以用visibilty:1變?yōu)関isibilty:0，同樣也可以簡(jiǎn)單實(shí)現(xiàn)顯示到隱藏的效果。

另外加一句，不太清楚transition屬性的可以自行去百度去，transition-timing-function屬性定義的速度曲線，使用cubic-bezier貝塞爾曲線，可以做到很多效果，大家可以上這個(gè)網(wǎng)址去試一試貝塞爾曲線實(shí)現(xiàn)的動(dòng)畫(huà)。