2

中に長方形が入ったCSS列レイアウトを作成しましたdivs。これは私のコードです。

ユーザーがそれぞれをクリックすると、削除されます。CSS3トランジションを追加しました：

-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
transition: all 0.3s ease-in;

これで、クリックされたアイテムは効果的に削除されますが、他の長方形（このdivの後）は効果なしに場所を変更します。

他のアイテムが場所を変えているときに効果を追加するにはどうすればよいですか？CSS3列で可能ですか？そうでない場合は、どちらの方法を選択すればよいですか？どのように？

注：Windows8のスタートメニューのようなものを作成します。その中のタイルを削除すると、他のアイテムがアニメーションで新しい位置に移動します。

4

2 に答える 2

3

私はdivを作成してdisplay: block与えましたfloat: leftが、これはあなたが探している効果ですか？http://jsfiddle.net/AQ7bp/22/

于 2012-11-25T17:04:55.233 に答える
1

私はあなたの箱のそれぞれを容器で囲みます

{
overflow: hidden
max-height: 999px
display: inline-block
}

max-height: 0そして、ボックスを削除するときに、このコンテナをアニメートします。あなたは「親」で周囲の箱を手に入れることができました。次に、ボックスビーイングをアニメーション化します。

surrounding-container {
transition: all 0.2s linear;
[..]
}

これで効果が出ます。

編集：これがフィドルです：http： //jsfiddle.net/sTBjn/

于 2012-11-25T15:50:55.997 に答える