Javascript 展开树时CSS转换不起作用

我正在使用简单的CSS和JS构建一个

TreeView

，现在我想在扩展/折叠节点时添加一点过渡效果。转换可用于折叠，但不可用于扩展操作。我使用

max height

值作为过渡值

---

这是我的代码笔链接：

我已经删除了你的

转换：all.4s ease和使用的<代码>过渡：最大高度0.4s易于进出

此外，我已将上述内容添加到

.tree .node.active > .subitems {
  max-height: 1000px;
  transition: max-height 0.4s ease-in-out;
}

注意，在下面的演示中，我在js中添加了一个
setTimeout
，以使
+
/
-
在动画之后发生更改。如果你不喜欢这个效果，你可以直接使用js

演示


$（函数（）{
$（'#tree.node.toggler'）。on（'click'，function（）{
var obj=这个；
$（this）.closest（'.node'）.toggleClass（'active'）.find（'.subitems'）.slideToggle（）；
if（$（obj）.closest（'.node'）.hasClass（'active'））{
$（obj.html（“”）；
}否则{
$（obj.html（“”）；
}
});
});
@导入url(https://fonts.googleapis.com/css?family=Roboto);
* {
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
填充物：5em；
背景：白色；
字体系列：“Roboto”，Arial，Helvetica，无衬线；
字体大小：12px；
}
div{
位置：相对位置；
显示：块；
}
.树{
显示：内联块；
用户选择：无；
}
.树，
.tree.subitems{
边缘：0.1.2米；
/*压痕*/
颜色：#1a73e8；
}
.tree.subitems{
左侧边缘：.6em；
/*（1/2）*/
显示：无；
溢出：隐藏；
}
树：以前，
.tree.子项：之前{
内容：“；
显示：块；
宽度：0；
位置：绝对位置；
排名：0；
底部：0；
左：0；
左边框：1px实心；
}
.tree.node{
填充：0.1.5em；
/*压痕+0.5em*/
线高：2米；
字体大小：粗体；
}
.tree.node:之前{
内容：“；
宽度：1米；
/*等于缩进*/
身高：0；
边框顶部：1px实心；
页边顶部：-1px；
/*边框顶宽*/
位置：绝对位置；
顶部：1米；
/*（线高/2）*/
左：0；
}
.tree.node:最后一个子节点：之前{
背景：白色；
高度：自动；
顶部：1米；
/*（线高/2）*/
底部：0；
}
.tree.node.display，
.tree.node.display>div{
显示：内联块；
垂直对齐：中间对齐；
右边距：.25em；
}
.tree.node.display{
空白：nowrap；
}
.tree.node.display.icon{
线高：0；
}
.tree.node.display.icon svg{
宽度：1.2米；
高度：1.2米；
}
.tree.node.display.icon.toggler{
光标：指针；
}
.tree.node.display.options{
光标：指针；
可见性：隐藏；
不透明度：0；
宽度：4.35em；
/*（3*图标宽度）+（3*图标右边距）*/
左侧边缘：.25em；
线高：0；
过渡：可见性.1s线性，不透明度.1s线性；
}
.tree.node.display.options.icon{
显示：内联块；
右边距：.25em；
}
.tree.node.display:hover.options{
能见度：可见；
不透明度：1；
}
.tree.node.active>.subitems{
}

树

动物
鸟
哺乳动物
大象
老鼠
爬行动物
植物
花
玫瑰