Question

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

现在，我正在尝试设置两个网格列修复之间的平滑过渡，这在屏幕大小更改时会发生。更改范围从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是你唯一的朋友。

以下是我如何去做的事情：

将每个网格元素的内容克隆到绝对定位的容器中。
使用不透明度淡化实际内容
将新的grid-columns属性应用于网格
将克隆的元素激活到真实的新位置
将克隆的内容淡出，然后将真正的内容淡出
删除克隆。

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

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

确保每个网格元素只有一个子元素（以简化计算转换的宽度/高度）
简化跟踪每个元素，以便您知道要转换到哪里

Answer 2

我以非常糟糕的黑客欺骗了它。但它有效......

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

动画平滑的css网格列更改

3 个答案: