Html 父类更改时的CSS转换？

我正在使用CSS父类为一些数据定义多个布局。当我更改父类时，布局会根据需要进行完美的更改，但是我认为添加一些CSS动画（转换）可能会很有趣。但我似乎无法让它发挥作用。我发现了另一个类似的问题，但没有答案，而且也不完全一样（或者说不那么直截了当）

这是小提琴：

我现在真的不在乎什么转变；高度、宽度、颜色等等。一旦有人告诉我我做错了什么，我可以调整它

HTML:

---

您正在将元素的

显示

从

内联块

更改为

块

。您无法转换这样的更改。您可以轻松地将两者的

显示为相同；然而，这消除了期望的行为

与通过
display
属性操作元素相反，您可以将
display:inline block
换成
float:left
，在第二个元素上设置
float:none
，并保持
display:block
。这似乎奏效了，但由于发生了根本性的变化，它并没有产生一个好的动画

.layoutCards .entity {
    float: left;
}

.layoutList .entity {
    float: none;
    display:block;
}

或者，您也可以只在两个屏幕上设置
display:block
。生成此-。
您不能同时将
显示
值从
内联块
更改为
块
。是的，我认为您是对的。这是行不通的。太糟糕了，我喜欢这个功能，但是转换有点不协调。谢谢你的解释和其他例子。
.layoutCards .entity {
    float: left;
}

.layoutList .entity {
    float: none;
    display:block;
}