小编Roe*_*lly的帖子

网格模板列动画

是否可以为 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;
Run Code Online (Sandbox Code Playgroud)

}

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%";
        }
    }
Run Code Online (Sandbox Code Playgroud)

非常感谢您的提示!

javascript css animation transition css-grid

5
推荐指数
1
解决办法
2620
查看次数

标签 统计

animation ×1

css ×1

css-grid ×1

javascript ×1

transition ×1