Jquery 过滤时添加css转换

我已经创建了上面的过滤，用户点击按钮，项目被过滤。我还试图添加一个平滑的过渡，以我的例子来说，我不想合作：）

我添加了

transition:all 10.3s ease在我的课堂上，但它不起作用

我错过了什么？
谢谢


$（“#筛选按钮”）。每个（函数（）{
$（此）。在（“单击”，函数（）上）{
var标签=[]；
var filtertag=$（this.attr（'data-type'）；
标签。推（过滤器标签）；
console.log（“filtertag=“+filtertag”）；
如果（filtertag==='all'）{
标签=[]；
$（'.record'）.removeClass（'d-none'）；
}否则{
$（'.record'）.addClass（'d-none'）；
for（设i=0；i
.d-none{
显示：无；
}
.d-inline{
显示：内联块；
}
#滤器{
边缘底部：20px；
}
.把你的名字列在右边{
颜色：白色；
}
.记录{
填充：10px 10px；
边缘底部：20px；
背景颜色：蓝色；
过渡：全部10.3秒轻松；
}

全部的
诉讼程序
期刊文章
我的课文1
我的课文2
我的课文3
您错过了：

属性
显示：无
不能设置动画，也不能与css平滑过渡一起使用

说明：

这是因为转换需要有值，可以在整个转换时间内“逐步”更改

可能的标准方法：降低到零高度，而不是
显示：无
：

另一种方法是淡出并通过将某个元素的高度减为零来“删除”该元素。演示请参见下面的示例。但是请注意：正如您在示例中所看到的，需要为将要减少的元素设置一个固定的
高度。对于属性
高度
，它不适用于
自动
或
最小高度

也许是更好的项目方法：将html结构更改为
grid
：

要平滑地删除/减少自动调整大小的高度元素（我假设这就是您要寻找的），您可以使用另一个html结构。如果您可以使用
栅格
，在这种情况下，您可以通过使用过渡轻松地减少自动高度行

昨天我们做了一个关于这项工作的演示。但同样的机制也适用于垂直结构。如果您愿意，可以在此处查看不同的水平示例：



（注意：该示例中的转换适用于悬停！）


解释方法1的示例：


$（“#筛选按钮”）。每个（函数（）{
$（此）。在（“单击”上，函数（）{
var标签=[]；
var filtertag=$（this.attr（'data-type'）；
标签。推（过滤器标签）；
console.log（“filtertag=“+filtertag”）；
如果（filtertag==='all'）{
标签=[]；
$（'.record'）.removeClass（'d-none'）；
}否则{
$（'.record'）.addClass（'d-none'）；
for（设i=0；i
.d-inline{
显示：内联块；
}
#滤器{
边缘底部：20px；
}
.把你的名字列在右边{
颜色：白色；
}
* {
框大小：边框框；
}
.记录{
高度：38px；
填充：10px 10px；
边缘底部：20px；
背景颜色：蓝色；
过渡：所有5s轻松；
}
d-无{
身高：0；
填充：0 10px；
边际上限：0；
页边距底部：0；
不透明度：0；
过渡：所有5s轻松；
}

全部的
诉讼程序
期刊文章
我的课文1
我的课文2
我的课文3