Javascript CSS属性转换失败

我的网页中有多个类的

div

元素。根据div的性质，多个类只是为了能够在jQuery中轻松操作

我正在展开和折叠按钮单击事件上的div。这很好，但由于某些原因，转换不起作用

我已经为它制作了一把小提琴，请查看小提琴

我已经看到了

转换的例子，我的问题是转换应该总是在顶级标识符上吗？
例如
div
或
元素id

我的Css有点像这样（也有小提琴）

单击按钮，我只需将展开类添加到div并删除折叠类（在检查div是否已展开后）。
您有一个高度和宽度的转换，但您永远不会更改这些属性。我能看到的最简单的事情是转换
所有属性

transition: all 3s;


试试这个：

.display{
  background-color: #a17917;
}
.mytable td div.data-div{
    min-height:120px;
    max-height:140px;
    min-width:120px;
    max-width:140px;
    border: 1px solid black;
    overflow:hidden;
    position: relative;
    transition: all 3s;
}
.mytable td div.collapse{
   min-height:120px;
    max-height:140px;
    min-width:120px;
    max-width:140px;
}
.mytable td div.expand{
    min-height:300px;
    max-height:300px;
    min-width:300px;
    max-width:300px;
}

我明白了，那么我可以使用“最小高度”转换吗？或者我应该实际使用
height
属性。非常感谢您的回答。仅出于学习目的，我可以使用
transition
中的最小高度作为值吗？@progrAmmar看不出为什么不能。你唯一不能转换的东西（这是一个巨大的痛苦）是
height:auto
。如果您需要，请在StackOverflow中搜索其他答案
.mytable td div.data-div{
    min-height:120px;
    max-height:140px;
    min-width:120px;
    max-width:140px;
    border: 1px solid black;
    overflow:hidden;
    position: relative;
    transition: all 3s ease /* change this */
}

.display{
  background-color: #a17917;
}
.mytable td div.data-div{
    min-height:120px;
    max-height:140px;
    min-width:120px;
    max-width:140px;
    border: 1px solid black;
    overflow:hidden;
    position: relative;
    transition: all 3s;
}
.mytable td div.collapse{
   min-height:120px;
    max-height:140px;
    min-width:120px;
    max-width:140px;
}
.mytable td div.expand{
    min-height:300px;
    max-height:300px;
    min-width:300px;
    max-width:300px;
}