颜色变化悬停的转换也会影响应用时的显示

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;而不是直接隐藏，在链接之前有一个延迟（动画的长度）是隐藏的。

这很奇怪，因为我只告诉链接转换它的颜色。这是一个bug还是设计？

更新在我的示例中，我使用了链接，但在我的实际网站链接和按钮的样式相同。

Answer 1

由于某种原因，在类上显式设置display none并且元素修复了这个。

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

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