1

div 要素に width-transition を適用すると、アニメーションが完全に機能します。ただし、CSS で同じ div に高さと幅を指定すると、アニメーションが妨げられます。私は何が欠けていますか？

ホバーすると、色もアニメーションも変化しません。すべての div に共通のスタイルを設定するにはどうすればよいですか?

  1. デフォルトのスタイリング
  2. ホバー時のスタイリング

JS Fiddle のサンプルはこちら、スニペットはこちら:

#div2 {

/*Un-commenting the below part, fails the animation assigned to this div
    width:100px;
    height:50px;
*/
    -webkit-transition:width 3s;
    background-color:blue;
}

div {
    width:100px;
    height:50px;
    background:red;
    color:white;
    font-weight:bold;
    -webkit-transition:width 2s;
}

 #div1 {
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
#div2 {
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
div:hover {
    width:300px;
    color:black;
}
4

3 に答える 3

0

これはばかげていますが、ID の代わりに CLASS を使用して同じプロパティを提供し、アニメーションとプロパティ (フォントの色、幅、高さ) が機能していました。

したがって、IDを使用してプロパティを提供するとオーバーライドされる可能性があると思います..したがって、クラスを使用することは常に安全です。

于 2013-11-09T11:17:04.777 に答える
0

ID のスタイルは、前述のタグのスタイルをオーバーライドするため、ホバーもオーバーライドされます。

ID に個別の寸法を適用する場合は、ID にホバー幅を個別に定義する必要があります。

あなたの場合、このようなもの：

#div2{
width:100px;
height:50px;
-webkit-transition:width 3s;
background-color:blue;
}

#div2:hover{
    width:300px;
}

変更されたjsfiddleの例

于 2013-11-09T07:47:08.093 に答える