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

在日常的項目開發中，我們會很經常的遇見如下的需求：

在瀏覽器頁面中，當鼠標移動到某個部分后，另一個部分在延遲若干時間后出現

在鼠標移除該區域后，另一部分也在延遲若干時間后消失

我相信這是一個很常見的一個需求，有很多種方式能夠實現，但是，其實現方式的原理各不相同，也有利有弊。

在CSS中，有一個偽類hover也能夠監聽鼠標移動到某個元素上面，因此我們也可以利用CSS來實現我們剛剛的功能。

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

transition是一個簡寫屬性，可設置transition-property, transition-duration, transition-timing-function, transition-delay。 transition用來定義元素兩種狀態之間的過渡。不同狀態可以用 pseudo-classes 定義，比如 :hover 、:active或使用JavaScript設置。

該屬性第一個值為需要變化的屬性值，第二個值為其持續時間，第三個值為變化方式，第四個值為其延時。該屬性指定的值只要指定的屬性有任何變化，都會觸發該屬性。即在從該樣式到其他樣式，以及其他樣式回到該樣式時都會產生效果。例如：

transition:opacity 1s linear 1s;

具體介紹請看MDN官方介紹。

現在，讓我們用transition屬性來實現上面的功能。簡單點如下所示：

//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;
    }
  }
}

通過在CSS中添加transition-duration，我們可以實現延時顯示的目的。并且，我們不需要自己去清除定時器，而由瀏覽器來判別。

在此，我們為什么不用display屬性呢，因為在display改變時，transition并不會生效。

那我們為什么需要在使用了opacity屬性的時候同時使用visibility屬性呢。因為opacity屬性只是讓元素變得透明，而不會讓元素消失。如果不加速visibility屬性的話，那元素變透明后仍然可以點擊，那么會出現一些奇怪的影響。

到目前為止，我們利用CSS完全模擬了第一部分我們使用JavaScript實現的功能，而且看上去更簡潔。那么，下面我們來講一些更加復雜的功能有助于大家理解transition。

現在我們需要在鼠標移動上去后，出現一個漸變的效果，讓另一框慢慢出現，同時在鼠標移出的時候也有漸變消失的效果，那么我們就需要來使用一下transition的另外幾個屬性。

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

transition: opacity 0.5s linear;

這樣的話，在鼠標移入的時候，會有一個漸變的效果。但是，問題也出現了，在鼠標移出的時候，div2立馬就消失了。讓我們來分析一下鼠標移入和移出時的效果。

當鼠標移入時：

鼠標移入div1元素

觸發了hover事件，div2的visibility屬性變為visible

transition屬性讓opacity屬性從0變為1

而當鼠標移出時：

鼠標移出div1元素

hover事件停止觸發，div2的visibility屬性變為hidden

transition屬性讓opacity屬性從1變為0

根據上面的情況我們知道，當hover事件結束后，visibility屬性立馬就變成了hidden了，因此后面的動畫效果就無法看到了。

那么如果我們為visibility屬性也加上延時呢，能不能夠達到我們的目標，讓我們來看一下效果。

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

代碼改動為如上情況后，我們會發現，當鼠標移出的時候，能夠看到動畫效果。但是當鼠標移入時，動畫效果消失了，現在再讓我們來分析下為什么會出現這個情況。

當時鼠標移入時：

鼠標移入div1元素

觸發hover事件

transition屬性讓opacity屬性從0變為1

visibility屬性變為visible

當鼠標移出時：

鼠標移出div1元素

hover事件停止觸發

transition屬性讓opacity屬性從1變為0

visibility屬性變為hidden

從上面的分析我們可以知道，因為visibility屬性為不連續變化屬性，因此在transition中只有transition-delay對該屬性產生了效果。所以visibility屬性延時了0.5s執行，導致了在鼠標移入時看不到效果。

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

#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;
    }
  }
}

那么現在讓我們來分析下為什么這么寫能夠達到我們需要的效果。

當鼠標移入時：

鼠標移入div1

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

transition屬性讓opacity屬性由0變為1

當鼠標移出時：

鼠標移出div1

hover事件停止觸發，transition延時恢復到0.5s，因此visibility屬性不會馬上觸發

transition屬性讓opacity屬性由1變為0

visibility屬性由visible變為hidden

我們通過一個很簡單巧妙的方法，通過改變transition-delay，從而讓visibility屬性立即執行，達到了我們需要的效果。

附上利用JS來實現該方案的代碼用于參考。這個其實應該是大部分人會想到的方法，利用mouseover或者click事件來進行事件的監聽，利用setTimeout來進行延時處理，例如這樣：

但是上面這個代碼有一個比較嚴重的問題，就是當鼠標兩次移動上去的間隔小于500ms時，上一次的setTimeout的代碼還是會觸發，因此會看到一次閃動的效果。

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

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);
});

調整為上述代碼之后，基本可以滿足我們的需求。后續如果需要添加動畫之類的操作，也只需要繼續像代碼添加相關邏輯即可，在此就不再演示。

在需求開發的過程中，遇到了這個問題。最開始用JavaScript實現，開發起來比較復雜，容易與業務邏輯代碼混在一起不好維護。通過CSS來實現這個功能，既簡單高效，又能夠避免增加JavaScript復雜度，是一個比較優的解決方案。

CSS3 transitions using visibility and delay(英文)

transition過渡

transition示例

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