摘要：用來(lái)定義元素兩種狀態(tài)之間的過(guò)渡。到目前為止，我們利用完全模擬了第一部分我們使用實(shí)現(xiàn)的功能，而且看上去更簡(jiǎn)潔。附上利用來(lái)實(shí)現(xiàn)該方案的代碼用于參考。由于代碼效果時(shí)好時(shí)壞，猜測(cè)可能與的容器相關(guān)。

在日常的項(xiàng)目開(kāi)發(fā)中，我們會(huì)很經(jīng)常的遇見(jiàn)如下的需求：

在瀏覽器頁(yè)面中，當(dāng)鼠標(biāo)移動(dòng)到某個(gè)部分后，另一個(gè)部分在延遲若干時(shí)間后出現(xiàn)

在鼠標(biāo)移除該區(qū)域后，另一部分也在延遲若干時(shí)間后消失

我相信這是一個(gè)很常見(jiàn)的一個(gè)需求，有很多種方式能夠?qū)崿F(xiàn)，但是，其實(shí)現(xiàn)方式的原理各不相同，也有利有弊。

在CSS中，有一個(gè)偽類(lèi)hover也能夠監(jiān)聽(tīng)鼠標(biāo)移動(dòng)到某個(gè)元素上面，因此我們也可以利用CSS來(lái)實(shí)現(xiàn)我們剛剛的功能。

我們需要使用的是CSS3中的新特性：transition。

transition是一個(gè)簡(jiǎn)寫(xiě)屬性，可設(shè)置transition-property, transition-duration, transition-timing-function, transition-delay。 transition用來(lái)定義元素兩種狀態(tài)之間的過(guò)渡。不同狀態(tài)可以用 pseudo-classes 定義，比如 :hover 、:active或使用JavaScript設(shè)置。

該屬性第一個(gè)值為需要變化的屬性值，第二個(gè)值為其持續(xù)時(shí)間，第三個(gè)值為變化方式，第四個(gè)值為其延時(shí)。該屬性指定的值只要指定的屬性有任何變化，都會(huì)觸發(fā)該屬性。即在從該樣式到其他樣式，以及其他樣式回到該樣式時(shí)都會(huì)產(chǎn)生效果。例如：

transition:opacity 1s linear 1s;

具體介紹請(qǐng)看MDN官方介紹。

現(xiàn)在，讓我們用transition屬性來(lái)實(shí)現(xiàn)上面的功能。簡(jiǎn)單點(diǎn)如下所示：

//HTML文件



    
    
    



    

    





//Sass文件
#container {
  display: inline-block;
  #div1 {
    width: 100px;
    height: 100px;
    background-color: #000;
  }

  #div2 {
    visibility: hidden;
    opacity: 0;
    width: 100px;
    height: 100px;
    background-color: #F00;
    transition-delay: 0.5s;
  }
  &:hover {
    #div2 {
      visibility: visible;
      opacity: 1;
    }
  }
}

通過(guò)在CSS中添加transition-duration，我們可以實(shí)現(xiàn)延時(shí)顯示的目的。并且，我們不需要自己去清除定時(shí)器，而由瀏覽器來(lái)判別。

在此，我們?yōu)槭裁床挥?b>display屬性呢，因?yàn)樵?b>display改變時(shí)，transition并不會(huì)生效。

那我們?yōu)槭裁葱枰谑褂昧?b>opacity屬性的時(shí)候同時(shí)使用visibility屬性呢。因?yàn)?b>opacity屬性只是讓元素變得透明，而不會(huì)讓元素消失。如果不加速visibility屬性的話，那元素變透明后仍然可以點(diǎn)擊，那么會(huì)出現(xiàn)一些奇怪的影響。

到目前為止，我們利用CSS完全模擬了第一部分我們使用JavaScript實(shí)現(xiàn)的功能，而且看上去更簡(jiǎn)潔。那么，下面我們來(lái)講一些更加復(fù)雜的功能有助于大家理解transition。

現(xiàn)在我們需要在鼠標(biāo)移動(dòng)上去后，出現(xiàn)一個(gè)漸變的效果，讓另一框慢慢出現(xiàn)，同時(shí)在鼠標(biāo)移出的時(shí)候也有漸變消失的效果，那么我們就需要來(lái)使用一下transition的另外幾個(gè)屬性。

在上面的代碼中稍加改動(dòng)，就能夠得到我們需要的效果。

transition: opacity 0.5s linear;

這樣的話，在鼠標(biāo)移入的時(shí)候，會(huì)有一個(gè)漸變的效果。但是，問(wèn)題也出現(xiàn)了，在鼠標(biāo)移出的時(shí)候，div2立馬就消失了。讓我們來(lái)分析一下鼠標(biāo)移入和移出時(shí)的效果。

當(dāng)鼠標(biāo)移入時(shí)：

鼠標(biāo)移入div1元素

觸發(fā)了hover事件，div2的visibility屬性變?yōu)?b>visible

transition屬性讓opacity屬性從0變?yōu)?

而當(dāng)鼠標(biāo)移出時(shí)：

鼠標(biāo)移出div1元素

hover事件停止觸發(fā)，div2的visibility屬性變?yōu)?b>hidden

transition屬性讓opacity屬性從1變?yōu)?

根據(jù)上面的情況我們知道，當(dāng)hover事件結(jié)束后，visibility屬性立馬就變成了hidden了，因此后面的動(dòng)畫(huà)效果就無(wú)法看到了。

那么如果我們?yōu)?b>visibility屬性也加上延時(shí)呢，能不能夠達(dá)到我們的目標(biāo)，讓我們來(lái)看一下效果。

    transition: visibility 0s linear 0.5s, opacity 0.5s linear;
    

代碼改動(dòng)為如上情況后，我們會(huì)發(fā)現(xiàn)，當(dāng)鼠標(biāo)移出的時(shí)候，能夠看到動(dòng)畫(huà)效果。但是當(dāng)鼠標(biāo)移入時(shí)，動(dòng)畫(huà)效果消失了，現(xiàn)在再讓我們來(lái)分析下為什么會(huì)出現(xiàn)這個(gè)情況。

當(dāng)時(shí)鼠標(biāo)移入時(shí)：

鼠標(biāo)移入div1元素

觸發(fā)hover事件

transition屬性讓opacity屬性從0變?yōu)?

visibility屬性變?yōu)?b>visible

當(dāng)鼠標(biāo)移出時(shí)：

鼠標(biāo)移出div1元素

hover事件停止觸發(fā)

transition屬性讓opacity屬性從1變?yōu)?

visibility屬性變?yōu)?b>hidden

從上面的分析我們可以知道，因?yàn)?b>visibility屬性為不連續(xù)變化屬性，因此在transition中只有transition-delay對(duì)該屬性產(chǎn)生了效果。所以visibility屬性延時(shí)了0.5s執(zhí)行，導(dǎo)致了在鼠標(biāo)移入時(shí)看不到效果。

那么，我們有沒(méi)有辦法同時(shí)在鼠標(biāo)移入和移出的時(shí)候同時(shí)看到動(dòng)畫(huà)效果呢。需要達(dá)到這個(gè)目的，其實(shí)換一個(gè)思路立馬就能夠解決。我們不只需要在hover事件中重置這個(gè)延時(shí)，將其重新指定為0，馬上就能夠達(dá)到我們想要的效果。具體示例代碼如下：

#container {
  display: inline-block;
  #div1 {
    width: 100px;
    height: 100px;
    background-color: #000;
  }

  #div2 {
    visibility: hidden;
    opacity: 0;
    width: 100px;
    height: 100px;
    background-color: #F00;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  }
  &:hover {
    #div2 {
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
    }
  }
}

那么現(xiàn)在讓我們來(lái)分析下為什么這么寫(xiě)能夠達(dá)到我們需要的效果。

當(dāng)鼠標(biāo)移入時(shí)：

鼠標(biāo)移入div1

hover事件觸發(fā)，重新指定transition屬性的transition-delay為0s，visibility屬性由hidden立馬變成visible

transition屬性讓opacity屬性由0變?yōu)?

當(dāng)鼠標(biāo)移出時(shí)：

鼠標(biāo)移出div1

hover事件停止觸發(fā)，transition延時(shí)恢復(fù)到0.5s，因此visibility屬性不會(huì)馬上觸發(fā)

transition屬性讓opacity屬性由1變?yōu)?

visibility屬性由visible變?yōu)?b>hidden

我們通過(guò)一個(gè)很簡(jiǎn)單巧妙的方法，通過(guò)改變transition-delay，從而讓visibility屬性立即執(zhí)行，達(dá)到了我們需要的效果。

附上利用JS來(lái)實(shí)現(xiàn)該方案的代碼用于參考。這個(gè)其實(shí)應(yīng)該是大部分人會(huì)想到的方法，利用mouseover或者click事件來(lái)進(jìn)行事件的監(jiān)聽(tīng)，利用setTimeout來(lái)進(jìn)行延時(shí)處理，例如這樣：

但是上面這個(gè)代碼有一個(gè)比較嚴(yán)重的問(wèn)題，就是當(dāng)鼠標(biāo)兩次移動(dòng)上去的間隔小于500ms時(shí)，上一次的setTimeout的代碼還是會(huì)觸發(fā)，因此會(huì)看到一次閃動(dòng)的效果。

因此，我們需要在檢測(cè)到兩次間隔小于500ms時(shí)，清除掉上次的setTimeout的代碼。所以，改動(dòng)代碼如下(注：如有表現(xiàn)與描述不一致請(qǐng)看文章末尾說(shuō)明):

div1.addEventListener("mouseover", function() {
    clearTimeout(handle);
    setTimeout(function() {
        div2.style.display = "block";
    }, 500);
});

var handle = 0;
div1.addEventListener("mouseleave", function() {
    handle = setTimeout(function() {
        div2.style.display = "none";
    }, 500);
});

調(diào)整為上述代碼之后，基本可以滿足我們的需求。后續(xù)如果需要添加動(dòng)畫(huà)之類(lèi)的操作，也只需要繼續(xù)像代碼添加相關(guān)邏輯即可，在此就不再演示。

在需求開(kāi)發(fā)的過(guò)程中，遇到了這個(gè)問(wèn)題。最開(kāi)始用JavaScript實(shí)現(xiàn)，開(kāi)發(fā)起來(lái)比較復(fù)雜，容易與業(yè)務(wù)邏輯代碼混在一起不好維護(hù)。通過(guò)CSS來(lái)實(shí)現(xiàn)這個(gè)功能，既簡(jiǎn)單高效，又能夠避免增加JavaScript復(fù)雜度，是一個(gè)比較優(yōu)的解決方案。

CSS3 transitions using visibility and delay(英文)

transition過(guò)渡

transition示例

jsbin是一個(gè)在線的編輯器，能夠在代碼編寫(xiě)完成后馬上看到效果，但是該文中有部分代碼在jsbin中出現(xiàn)表現(xiàn)與本地不一致的情況(例如CSS進(jìn)階中最后一個(gè)代碼)，大家可以將代碼放到本地驗(yàn)證。由于代碼效果時(shí)好時(shí)壞，猜測(cè)可能與jsbin的容器相關(guān)。