动画平滑的 CSS 网格列更改

Question

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

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

有人知道如何解决它吗？

这是我的 CSS 文件中的 sn-p：

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. 简化每个元素的跟踪，让您知道要在哪里过渡

Answer 2

我用一个非常糟糕的 hack 欺骗了它。但它有效...

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) {
        position   : fixed;
        z-index    : 9999;
        width      : 60%;
        margin     : 155px 20% 0;
        animation  : grow-fixed 1s ease;
        @keyframes grow-fixed {
            0% {
                width : 60%;
                margin: 155px 20% 0;
            }

            100% {
                width : 80%;
                margin: 155px 10% 0;
            }
        }
        width      : 80%;
        margin     : 155px 10% 0;
        grid-column: 2 / 10;
        grid-row   : 3 / 4;
    }
    @media screen and (min-width: 1378px) {
        position   : fixed;
        z-index    : 9999;
        width      : 80%;
        margin     : 155px 10% 0;
        animation  : shrink-fixed 1s ease;
        @keyframes shrink-fixed {
            0% {
                width : 80%;
                margin: 155px 10% 0;
            }

            100% {
                width : 60%;
                margin: 155px 20% 0;
            }
        }
        width      : 60%;
        margin     : 155px 20% 0;
        grid-column: 3 / 9;
        grid-row   : 3 / 4;
    }

Answer 3

即使您使用 javascript，也很难自己完成所有操作。所以我建议你使用这个库，不幸的是你不能用纯 html 使用它，所以你必须有一个 react 或 vue 项目。

https://www.npmjs.com/package/animate-css-grid

反应示例：

codepen.io/aholachek/pen/mxwvmV

Vue 示例：

codepen.io/sustained/pen/Rwbdgob