25

css3トランジションの使用に問題があります。トランジションをスムーズにするにはどうすればよいですか。すぐに表示されます。divボックス
にカーソルを合わせると、その高さがゆっくりと変化します。


HTMLコード

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

jsfiddle

4

5 に答える 5

38

自動ではなく指定の高さを設定する必要があると思います。http://jsfiddle.net/BN4Ny/これはスムーズな拡張を行います。ただし、その小さな閉じた開いた効果が必要かどうかはわかりません。jsfiddle をフォークして、指定された高さを追加しました。

于 2011-05-22T17:31:56.513 に答える
3

コンテナーで設定された高さを使用するか、JS を使用する代わりに (どちらも厄介なソリューションです)... 画像をリスト項目に配置し、li でトランジションを処理できます。

すべての画像が同様の高さになる場合は、コンテナ内のコンテンツが依然として動的である可能性があることを意味します。例えば...

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
于 2013-08-26T19:40:54.187 に答える
2

これを行う方法は次のとおりです。http://jsfiddle.net/minitech/hTzt4/

柔軟な高さを維持するには、残念ながら JavaScript が必要です。

于 2011-05-22T17:46:38.420 に答える