1

左にフローティングの固定幅 DIV がいくつかあります。ウィンドウ サイズが大きくなり、行に収まる DIV が増えると、DIV は即座に再配置されます。

ユーザーが特定のボックスをたどってどこに移動するかを簡単に確認できるように、再配置をアニメーション化する方法があるかどうかを知りたいです-できればCSSのみ。

.box {
  float:left;
  width: 200px;
  min-height:200px;
  background:red;
  margin:20px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

現時点では、WebKit のみのソリューションで問題ありません (WebView が埋め込まれたネイティブ アプリです)。試し-webkit-transition:all 2sてみたけど効果なし…

編集：

CSS3 の柔軟なボックス レイアウトにより、DIV 位置のアニメーション化された遷移が可能になるでしょうか?

4

2 に答える 2

2

ここでは石積み ( http://masonry.desandro.com/ ) のようなものが良い選択肢かもしれません。純粋な CSS ではないことはわかっていますが、クロスブラウザーで動作し、ページ速度にあまり影響を与えません。

上記のリンクから詳細を確認できますが、最も単純には、実際に必要なのは以下の JS だけです。

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

(明らかに、スクリプトをページのどこかに含め、いくつかの基本的な CSS スタイルも含める必要があります)

私が知る限り、CSS トランジションは、要素がフローティングではなく配置されている場合にのみ機能します。これは可能な解決策かもしれませんが、レイアウトを変更したい場合は、これが非常に面倒になることがわかります。より小さなウィンドウサイズ。純粋なCSSでこれを行う方法があれば、私はうれしい驚きですが!

于 2013-07-29T09:40:22.220 に答える