动画CSS网格（如何示例）-css教程-PHP中文网

Animating CSS Grid (How To Examples)

CSS Grid 的 grid-template-rows 和 grid-template-columns 属性现在可在所有主流浏览器中进行动画效果处理！事实上，CSS Grid 长期以来一直支持动画，因为它已内置于 CSS Grid 布局模块级别 1 规范中。

但直到最近，所有三大浏览器才全面支持对这些网格属性进行动画处理。让我们来看几个例子，激发您的创意吧！

示例 1：展开侧边栏

首先，这就是我们要讨论的内容：

一个简单的两列网格。以前，您可能不会使用 CSS Grid 来构建它，因为不支持动画和过渡，但如果您希望左侧列（可能是侧边栏导航）在悬停时展开呢？现在，这是可能的。

我知道你在想什么：“动画 CSS 属性？小菜一碟，我已经做了很多年了！”我也是。但是，在尝试一个特定的用例时，我遇到一个有趣的障碍。

因此，我们想要转换网格本身（特别是示例中 .grid 类上设置的 grid-template-columns）。但左侧列（.left）是需要 :hover 伪类的选择器。虽然 JavaScript 可以轻松解决这个难题——谢谢，但不用了——我们可以只用 CSS 来实现它。

让我们逐步讲解整个过程，从 HTML 开始。实际上非常标准……一个有两列的网格。

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

登录后复制

撇开装饰性 CSS 不谈，您首先需要在父容器（.grid）上设置 display: grid。

.grid {
  display: grid;
}

登录后复制

接下来，我们可以使用 grid-template-columns 属性定义和调整两列的大小。我们将左侧列设置得非常窄，稍后在悬停时增加其宽度。右侧列将占据其余空间，这要感谢 auto 关键字。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

登录后复制

我们知道我们要为它制作动画，所以让我们在添加动画的同时也添加一个过渡效果，这样状态之间的变化就会平滑且明显。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

登录后复制

.grid 就完成了！剩下的就是应用悬停状态。具体来说，我们将覆盖 grid-template-columns 属性，以便左侧列在悬停时占据更大的空间。

仅此一项并没有那么有趣，尽管 CSS Grid 现在支持动画和过渡非常棒。更有趣的是，我们可以使用相对较新的 :has() 伪类来在子元素（.left）悬停时设置父容器（.grid）的样式。

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

登录后复制

用简单的英语来说，这就是说：“如果 .grid 容器包含一个名为 .left 的元素并且该元素处于悬停状态，则对 .grid 容器执行某些操作。”这就是为什么 :has() 通常被称为“父”选择器。我们终于可以根据它包含的子元素来选择父元素——不需要 JavaScript！

因此，让我们在悬停时将 .left 列的宽度增加到 30%。.right 列将继续占据所有剩余空间：

.grid {
  display: grid;
}

登录后复制

我们也可以使用 CSS 变量，这在外观上可能更简洁，也可能不简洁，这取决于您的个人喜好（或者您可能已经在项目中使用 CSS 变量了）：

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

登录后复制

我非常喜欢 CSS 网格现在可以制作动画，但事实上我们只需九行 CSS 代码就能构建这个特定示例，这更令人惊叹。

这是 Olivia Ng 的另一个示例——概念相似，但包含内容（点击导航图标）：

示例 2：展开面板

此示例转换网格容器（列宽），也转换各个列（其背景颜色）。它非常适合在悬停时提供更多内容。

值得记住的是，repeat() 函数有时会产生错误的过渡，这就是为什么我单独设置每列的宽度（即 grid-template-columns: 1fr 1fr 1fr）。

示例 3：添加行和列

此示例会动画地“添加”一列到网格中。但是——你猜对了——这种情况也有一个陷阱。要求是“新”列不能隐藏（即设置为 display: none），并且 CSS Grid 必须在将它的宽度设置为 0fr 时承认它的存在。

因此，对于一个三列网格——grid-template-columns: 1fr 1fr 0fr（是的，即使值为 0 也必须声明单位！）会正确地转换为 grid-template-columns: 1fr 1fr 1fr，但 grid-template-columns: 1fr 1fr 不会。事后看来，考虑到我们对过渡工作原理的了解，这实际上是完全合理的。

这是 Michelle Barker 的另一个示例——相同概念，但带有一列和更多炫酷效果。确保以全屏模式运行此示例，因为它实际上是响应式的（没有技巧，只是好的设计！）。