动画平滑的 css 网格列更改

Question

我正在使用 CSS 网格布局来定位网站上的各个部分。我使用grid-column: x / x;和grid-row x / x;来设置它们在页面上的位置和大小。它工作得很好。

现在，我正在尝试在屏幕尺寸更改时发生的两个网格列修复之间的平滑过渡设置动画。变化是 from grid-column: 3 / 9;，grid-column: 2 / 10;这意味着 div 在1fr每一侧都增长。目前它只是“ping”到位，但我希望两者之间有一个平稳的过渡。

任何人有任何想法如何解决它？

这是我的 CSS 文件中的片段：

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}

Answer 1

grid-column或grid-row属性没有 CSS 转换。为了拥有任何，

grid-column: 2.5 / 9.5;

...从渲染的角度来看应该是有意义的。
想象一下，你是浏览器编码的人。你会如何渲染一个grid-column:2.5 / 9.5;？

期望 CSS 转换在这里工作就像期望它们在列之间移动时在 CSS 列中工作一样。

需要 CSS Grid 动画？JavaScript 是你唯一的朋友。

以下是我的处理方式：

1. 将每个网格元素的内容克隆到绝对定位的容器中。
2. 使用不透明度淡出真实内容
3. 将新grid-columns属性应用到网格
4. 将克隆元素动画化到真实元素的新位置
5. 淡出克隆的内容，让真实的内容重新出现
6. 删除克隆。

使这项工作跨浏览器/跨设备可能会带来一些问题，但它是可行的。

注意：您可能需要考虑在网格元素的内容和网格元素之间添加一层包装器，以帮助解决两件事：

1. 确保每个网格元素只有一个子元素（以简化获取宽度/高度以计算过渡）
2. 简化跟踪每个元素，以便您知道要在何处转换