为什么我的 CSS 过渡不能与 CSS 网格布局一起使用？

在 CSS 网格布局中使用 CSS 转换

问题：

使用 CSS 网格布局实现粘性标题，当向下滚动时标题缩小时，用户很难实现平滑的过渡效果。尽管在 .wrapper 类中添加了 CSS 过渡，但动画并没有发生。

分析：

根据 CSS 网格布局规范，过渡应该在网格上工作-template-columns 和 grid-template-rows 属性。但是，在提供的示例中，未应用过渡。

解决方案：

目前，仅 Firefox 支持网格属性上的 CSS 过渡。要启用所需的动画效果，必须修改布局以使用支持的方法。一种替代方法是使用 Flexbox 而不是 Grid。

以下是演示修复的更新代码片段：

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

以上是为什么我的 CSS 过渡不能与 CSS 网格布局一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！