是否可以为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%";
}
}
非常感谢您的提示!
答案 0 :(得分:0)
grid-template-columns
可以设置为动画,但是很遗憾,截至今天为止,所有已知的浏览器均未提供支持。但是,您可以在除Safari之外的所有浏览器中为(grid-)gap
,(grid-)row-gap
或(grid-)column-gap
设置动画。