<分区>
是否可以为 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%";
}
}
非常感谢您的提示!