google-chrome - Chrome 中的 CSS3 过渡错误会创建奇怪的背景颜色

Question

我试图通过实现 CSS3 的过渡属性在按钮上制作流畅的动画。在 Firefox、Safari 和 Opera 中，按钮从深绿色平滑地变为浅绿色(IE 无论如何都不支持转换)。

但出于某种原因，在 Chrome 中，如果您将鼠标悬停在一个按钮上然后立即将鼠标悬停在另一个按钮上，颜色似乎会滞后。有时我得到一个霓虹绿按钮，有时我得到一个黑色按钮；每当我从一个按钮到下一个按钮运行鼠标速度过快时，就会发生一些事情。 Chrome 能否跟不上过渡或其他什么？

我正在使用的准系统代码:

.button {  
transition: background-color 0.2s;  
-moz-transition: background-color 0.2s;  
-webkit-transition: background-color 0.2s;  
background-color: #466b46; 
}

.button:hover {  
background-color: #74d06c;  
}

Chrome 的版本为 24.0.1312.56。任何帮助将不胜感激。

Answer 1

如果我清楚地理解您的问题，您希望在悬停按钮时在 chrome 中平滑过渡吗？ 为此，请像这样更改您的代码:

.button {  
     transition: background-color linear 0.2s;  
     -moz-transition: background-color linear 0.2s;  
     -webkit-transition: background-color linear 0.2s;  
     background-color: #466b46; 
}

.button:hover {  
     transition: background-color linear 0.2s;  
     -moz-transition: background-color linear 0.2s;  
     -webkit-transition: background-color linear 0.2s;  
     background-color: #74d06c;  
}

使用此代码，如果您更改按钮上的悬停，您也可以平滑过渡到返回初始参数。

希望对您有所帮助。