1

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 です。どんな助けでも大歓迎です。

4

1 に答える 1

0

私があなたの問題を明確に理解している場合、ボタンをホバーしたときにクロムでスムーズに移行したいですか? そのためには、コードを次のように変更します。

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

このコードを使用すると、ボタン上のホバーを変更すると、イニシャル パラメーターに戻るためのスムーズな遷移も得られます。

これがお役に立てば幸いです。

于 2013-03-07T08:06:12.067 に答える