网格模板列动画[重复]

Posted 2023-03-06

【中文标题】网格模板列动画[重复]

【英文标题】：Grid-template-columns animation [duplicate]

【发布时间】：2019-04-09 10:42:00

【问题描述】：

是否可以为 grid-template-columns 属性设置动画？ 我正在构建技术文档的布局，在网格的第一列中您可以看到不同错误的描述，在第二列中可以看到相关技术内容的超链接。

按下一个按钮，使用 javascript 超链接容器将消失并将网格的列号更改为 1。

它正在工作，但效果是一个快照效果，我的目标是一个缓出幻灯片效果。

css:

.content-grid-rc 
    display: grid;
    grid-template-columns: auto 350px;
    grid-template-rows: auto auto;
    grid-template-areas: "a b"
                     "c c";
    transition: all 1s;

javascript：

    function hideLinks()
    let x = document.getElementsByClassName("card");
        for(let i = 0; i < x.length; i++)
            x[i].style.display = "none";
            document.getElementById("content-grid-rc").style.gridTemplateColumns = "100% 0%";
        
    

非常感谢您的提示！

【参考方案1】：

grid-template-columns 可以是动画的，但不幸的是——截至今天——任何已知的浏览器都不支持。但是，您可以在除 Safari 之外的所有浏览器中为 (grid-)gap、(grid-)row-gap 或 (grid-)column-gap 设置动画。

【讨论】：

感谢您提供的信息。我在互联网上读到同样的内容，无论如何我抓住了机会。 :)