Utilisation des transitions CSS dans la disposition de la grille CSS

Comme une solution de contournement, vous pouvez travailler avec la taille des éléments de la grille au lieu de grid-template-columns ou grid-template-rows.

Vous pourriez faire:

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>

Voici un autre exemple 2x2: https://codepen.io/erik127/pen/OvodQR

Et voici un exemple plus complet où vous pouvez ajouter plus de colonnes ou de lignes: https://codepen.io/erik127/pen/rdZbxL

, Malheureusement, il ya beaucoup de javascript, ce serait bien si grid-template-columns et grid-template-rows serait animables.

Un autre l'alternative qui pourrait fonctionner dans certains cas d'utilisation (si vos éléments de grille ne couvrent pas plusieurs lignes) est l'utilisation de flexbox avec une grille.

Une autre approche consiste à utiliser transform. Cela pourrait même être mieux parce que transform along w / opacity peut atteindre 60fps car il est accéléré par GPU au lieu de CPU accéléré (le navigateur doit faire moins de travail).

Voici un exemple: 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; }
}

Il existe un moyen de redimensionner les éléments de la grille lors de la transition en utilisant uniquement CSS, mais si vous voulez le redimensionner, vous devez utiliser %correctement, mais dans vos exemples, le problème existe à cause de la position collante. Vous devez ajouter de la hauteur sur votre élément .head, puis changer de hauteur après avoir ajouté la classe .tiny. Ici vous pouvez vérifier comment je l'ai corrigé (je suppose que c'est le résultat que vous vouliez avoir):

Violon

Michael réponse devez utiliser %s'dans votre exemple, car il a effet "blink" sur hover, si changé en valeurs de px sur %, il fonctionnera parfaitement sur le redimensionnement. Voici cet exemple changé sur % ' S:

Violon

Pour l'instant, la transition sur le modèle de grille ne fonctionne pas. Mais vous pouvez utiliser transform comme ceci:

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>