Question

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

我正在扩展并折叠按钮点击事件的div。哪个工作正常，但由于某种原因转换不起作用。

我为它制作了一个小提琴，请Click here查看小提琴。

我见过transition的示例，我的问题是应该始终在顶级标识符上进行转换吗？例如div或element-id。

我的Css看起来像这样（也可以在小提琴中使用）

.display{
  background-color: #a17917;
} /* DIV */
.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: height 3s, width 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;
}

单击按钮，我只需将展开类添加到div并删除折叠类（在检查div是否已展开之后）。

Answer 1

试试这个：

.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;
}

DEMO HERE

Answer 2

您有height和width的转换，但您永远不会更改这些属性。我能看到的最简单的事情是转换all属性

transition: all 3s;

https://jsfiddle.net/qvgLLe5k/6/

Answer 3

DEMO

.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 */
}

CSS属性转换失败

3 个答案: