顏色變化懸停的過渡也會影響顯示沒有應用

Question

我在動畫鏈接上的懸停顏色更改。這是工作的罰款：

<a href="#">Link</a> 

a { 
    transition: color 0.4s linear; 
} 
a { 
    color: red; 
} 
a:hover { 
    color: blue; 
} 

http://codepen.io/anon/pen/bNNvNL

但是我有一個問題，我與使用JavaScript來顯示，並通過添加類設置爲display: none;而不是被隱藏馬上有一個延遲隱藏鏈接（動畫的長度），然後隱藏鏈接。

這很奇怪，因爲我只告訴鏈接轉換它的顏色。這是一個錯誤還是設計？

更新在我的示例中，我使用的鏈接，但在我的實際網站鏈接和按鈕樣式相同。

Answer 1

出於某種原因，明確地在該類上顯示none，並且該元素解決了此問題。

// This along isnt sufficient: 
.hide { 
    display: none; 
} 

// Adding this makes it work: 
button.hide { 
    display: none; 
}