Использование переходов CSS в макете сетки CSS

Ответ 1

Согласно спецификации, переходы должны работать на grid-template-columns и grid-template-rows.

7.2. Явное определение размера дорожки: grid-template-rows и grid-template-columnsСвойства

Анимация: как простой список длины, процента или calc, предоставленный единственными отличиями являются значения длины, процента или расчета компоненты в списке

Итак, если моя интерпретация верна, если только изменения относятся к значениям свойств, без изменений в структуре правила, переходы должны работать. Но они этого не делают.

ОБНОВЛЕНИЕ

Это работает, но пока реализовано только в Firefox. Следуйте за нами для других обновлений браузера. https://codepen.io/matuzo/post/animating-css-grid-layout-properties

~ вклад в комментарии @bcbrian

Здесь тест, который я создал:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

Ответ 2

В качестве обходного пути вы можете работать с размером элементов сетки вместо grid-template-columns или grid-template-rows.

Вы можете сделать:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  background-color: red;
  height: 130px;
}

grid-item {
  height: 100px;
  transition: height 2s;
  background-color: lightgreen;
}

grid-container:hover .first-row {
  height: 25px;
}

grid-container:hover .last-row {
  height: 75px;
}

<grid-container>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
</grid-container>

Ответ 3

Другой подход - использовать transform. На самом деле это может быть даже лучше, потому что преобразование вдоль w/opacity может достигать 60 кадров в секунду, потому что GPU ускоряется, а процессор ускоряется (браузер должен делать меньше работы).

здесь пример: https://codepen.io/oneezy/pen/YabaoR

.sides {
  display: grid;
  grid-template-columns: 50vw 50vw;
}

.monkey { animation: 0.7s monkey cubic-bezier(.86,0,.07,1) 0.4s both; }
.robot { animation: 0.7s robot cubic-bezier(.86,0,.07,1) 0.4s both; }

@keyframes monkey {
  0% { transform: translate(-50vw); }
  100% { transform: 0; }
}

@keyframes robot {
  0% { transform: translate(50vw); }
  100% { transform: 0; }
}

Ответ 4

Существует способ изменить размер элементов сетки при переходе, используя только CSS, но если вы хотите изменить его размер, вы должны правильно использовать%, но в ваших примерах проблема существует из-за липкой позиции. Вы должны добавить высоту в свой элемент .head, а затем изменить высоту после добавления класса .tiny. Здесь вы можете проверить, как я его исправил (я думаю, что результат, который вы хотели иметь):

Fiddle

Майкл ответ должен использовать% в вашем примере, потому что сейчас он имеет "мигающий" эффект при наведении, если он изменен на значения с px на%, он будет отлично работать при изменении размера. Вот этот пример изменился на%:

Fiddle

Ответ 5

На данный момент переход по шаблону сетки не работает. Но вы можете использовать transform следующим образом:

jsFiddle

var button = document.querySelector("#btnToggle");
button.addEventListener("click",function(){
	var content = document.querySelector(".g-content");
  if(content.classList.contains("animate"))
    content.classList.remove("animate");
  else
	  content.classList.add("animate");
});

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

.g-content{
  display:grid;
  height:100%;
  grid-template-columns: 200px 1fr;
  grid-template-rows:60px 1fr 30px;
  grid-template-areas: 
    "g-header g-header"
    "g-side g-main"
    "g-footer g-footer";
 overflow-x:hidden;
}

.g-header{
  grid-area:g-header;
  background:#2B4A6B;
  display:grid;
  grid-template-columns: max-content 1fr;
}

.g-header button{
  align-self:center;
  margin:0 5px;
}

.g-side{
  grid-area:g-side;
  background:#272B30;
  transition:all 0.5s;
}

.g-main{
  grid-area:g-main;
  background:#FFFFFA;
  transition:all 0.5s;
}

.g-footer{
  grid-area:g-footer;
  background:#7E827A
}

.animate .g-main{
  width:calc(100% + 200px);
  transform:translateX(-200px);
}

.animate .g-side{
  transform:translateX(-200px);
}  

<div class="g-content">
  <div class="g-header">
    <button id="btnToggle">
    Toggle
    </button>
  </div>
  <div class="g-side">
  </div>
  <div class="g-main">
  test
  </div>
  <div class="g-footer">
  </div>
</div>