动画 grid-auto-rows 属性

Question

我有一个带有 X 网格项的简单 css 网格。网格项目的数量可以变化，它们的大小也可以变化。我需要创建一个简单的扩展器，因此一开始只有一定数量的行可见，但在按钮单击事件之后，它将扩展至完整高度并显示所有列。

我尝试为 grid-auto-rows 设置过渡，最初的值为 0fr，但该属性似乎不像 gird-template-rows 那样可设置动画。

const button = document.querySelector('button');
const grid = document.querySelector('.grid');

button.addEventListener('click', function(){
 grid.classList.add('expanded');
});

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-auto-rows: 0fr;
  gap: 1rem;
  transition: all 0.5s ease;
}

.grid.expanded {
  grid-auto-rows: 1fr;
}

.grid.expanded + button {
  display: none;
}

.grid-item {
  overflow: hidden;
}

<div class="grid">
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
</div>
<button>expand</button>

Answer 1

您可以种植物品：

const button = document.querySelector('button');
const grid = document.querySelector('.grid');

button.addEventListener('click', function(){
 grid.classList.add('expanded');
});

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-auto-rows: max-content;
  gap: 1rem;
  transition: all 2s ease;
  border: solid red 1px;
}

.grid.expanded + button {
  display: none;
}

.grid-item {
  overflow: hidden;
}

.grow {
  max-height: 00px;
  transition: all 2s ease;
}

.expanded .grow {
    max-height: 100px;
}

<div class="grid">
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item">
    <img src="https://place-hold.it/100x100">
  </div>
  <div class="grid-item grow">
    <img src="https://place-hold.it/100x100">
  </div>
</div>
<button>expand</button>