Анимация изменения высоты и ширины в сетке кладки.CSS сетка альтернативы? - PullRequest
Новая
       16

Анимация изменения высоты и ширины в сетке кладки.CSS сетка альтернативы?

0 голосов
/ 23 июня 2018

Я строю макет в стиле «каменной кладки», в котором все поля в основном имеют одинаковую высоту и ширину, но я хочу выделить несколько ящиков, увеличив их ширину и высоту.

(like this!)

Я хочу периодически менять, какие из полей выделены (некоторые могут уменьшаться до исходного размера, а другие могут увеличиваться).

Я построил макет выше с использованием CSS-сетки и переключая классы top и highlighted с помощью JavaScript, я могу достичь того, что хочу: 

.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

1 Ответ

0 голосов
/ 26 июня 2018

Для всех, кому это интересно, мне удалось анимировать свой текущий макет, используя , введите описание ссылки здесь .

...