アニメーションの高さと幅が石積みグリッドレイアウトに変更されます。CSSグリッドの代替？

debugcn 投稿 Dev

チャプマニオ

すべてのボックスが主に同じ高さと幅である「組積造」スタイルのレイアウトを構築していますが、幅と高さを増やしていくつかのボックスを強調表示したいと思います。

ハイライトするボックスを定期的に変更したい（元のサイズに縮小するものと拡大するものがある）。

CSSグリッドを使用して上記のレイアウトを作成し、JavaScripttopでhighlightedクラスとクラスを切り替えることで、必要なものを実現できます。

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fill, 5.5%);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.container .box {
  border: 1px solid black;

  overflow: hidden;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}

.container .box.top {
  grid-row: span 2;
  grid-column: span 2;
}

.container .box.highlighted {
  grid-row: span 3;
  grid-column: span 4;
}

<div class="container">
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box highlighted"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
</div>

topまたはhighlightedクラスを切り替えるときにトランジションをアニメーション化したいのですが、これを行う方法がわかりませんか？

これはCSSグリッドで可能ですか（オンラインで見つけられるものからはそうは思いません）？

そうでない場合、他の手法でこのレイアウト/効果を実現できますか？

注：これはクロスブラウザ（Google Chromeのみ）である必要はなく、JavaScriptを使用して支援できます-純粋なCSSである必要はありません

チャプマニオ

興味のある人のために、ここにリンクの説明を入力して、現在のレイアウトをアニメーション化することができました。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]