网格模板列动画

时间:2018-11-06 02:47:55

标签: javascript css animation transition css-grid

是否可以为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 个答案:

答案 0 :(得分:0)

grid-template-columns 可以设置为动画,但是很遗憾,截至今天为止,所有已知的浏览器均未提供支持。但是,您可以在除Safari之外的所有浏览器中为(grid-)gap(grid-)row-gap(grid-)column-gap设置动画。