Javascript 网格模板列动画

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

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

它是有效的，但效果是一个快照效果，我的目标是一个轻松的幻灯片效果

css:

}

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%";
        }
    }

函数hideLinks（）{
设x=document.getElementsByClassName（“卡”）；
for（设i=0；i

---

谢谢你的提示

网格模板列

可以设置动画，但不幸的是，截至今天，任何已知浏览器都不支持。但是，您可以在除Safari之外的所有浏览器中设置

（网格-）间距

、

（网格-）行间距

或

（网格-）列间距

的动画。

谢谢您提供的信息。我在网上也读到了同样的内容，但我还是抓住了机会

    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%";
        }
    }