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

使用此代码，如果您将鼠标悬停在按钮上，您还可以平滑过渡回初始参数。

我希望这会对你有所帮助。