Javascript 如何在CSS网格中设置过渡动画？

我试图在五列网格和三列网格之间转换，同时隐藏其他元素。过渡没有发挥作用

我已经用JavaScript实现了两者之间的硬转换，但我不确定使用CSS网格这将如何工作

函数集转换（elem）{
document.getElementById（elem）.className=“网格容器小”；
x=document.getElementsByClassName（'tohide'）
而（x.length>0）{
x[0]。类名='隐藏'；
}
document.getElementById（'O'）.className=“newori”；
document.getElementById（'A'）.className=“网格项c02r01”；
document.getElementById（'C'）.className=“网格项c01r02”；
document.getElementById（'F'）.className=“网格项c03r02”；
document.getElementById（'H'）.className=“网格项c02r03”；
}

rect{
填充：rgb（235、235、235）；
行程：rgb（221222222）；
}
#网格盒{
-webkit转换：所有1s线性；
-moz过渡：所有1s线性；
-o-过渡：所有1s线性；
过渡：所有1s线性；
}
#gridbox.transition{
-webkit转换：所有1s线性；
-moz过渡：所有1s线性；
-o-过渡：所有1s线性；
过渡：所有1s线性；
}
.起源{
网格列开始：3；
网格行开始：3；
}
纽奥里先生{
网格列开始：2；
网格行开始：2；
}
.c02r01{
网格列开始：2；
网格行开始：1；
}
.c02r02{
网格列开始：2；
网格行开始：2；
}
.c02r03{
网格列开始：2；
网格行开始：3；
}
.c01r02{
网格列开始：1；
网格行开始：2；
}
.c03r02{
网格列开始：3；
网格行开始：2；
}
.c03r01{
网格列开始：3；
网格行开始：1；
}
.c03r02{
网格列开始：3；
网格行开始：2；
}
.c03r03{
网格列开始：3；
网格行开始：3；
}
.c03r04{
网格列开始：3；
网格行开始：4；
}
.c03r05{
网格列开始：3；
网格行开始：5；
}
.c01r03{
网格列开始：1；
网格行开始：3；
}
.c02r03{
网格列开始：2；
网格行开始：3；
}
.c04r03{
网格列开始：4；
网格行开始：3；
}
.c05r03{
网格列开始：5；
网格行开始：3；
}
.网格容器已满{
显示：内联网格；
网格模板列：178px 84px 84px 84px 178px；
网格模板行：54px 84px 84px 84px 178px；
填充：1px；
}
.网格容器小型{
显示：内联网格；
网格模板列：178px 84px 178px；
网格模板行：54px 84px 178px；
填充：1px；
}
.表格项目{
边框：1px实心rgba（0,0,0,0.8）；
}
.隐藏{
最大高度：0px；
最大宽度：0px；
溢出：隐藏；
}

C3R1
->C2R1
C3R2
C1R3
->C1R2
C2R3
C4R3
C5R3
->C3R2
C3R4
C3R5
->C3R3

您只能使用数字进行转换<代码>隐藏不是数字。如果希望过渡显示减少，则需要更改元素的

max width

或

max height

（使用

overflow:hidden

），但您尚未指定过渡的外观，因此无法回答您的问题。谢谢，@RickardElimä。更改为

max width

和

overflow:hidden

并添加了过渡信息后，没有明显的区别。好的，我没有注意到您实际更改了网格布局。那我的建议就行不通了。你将不得不做一些骇客使这项工作，一个快速的谷歌搜索将告诉你如何实现这一点。抱歉占用您的时间。：）