颜色变化悬停的过渡也会影响显示没有应用

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