Javascript 删除多余的CSS动画

我正试图根据w3.com上的精彩链接制作自己的TreeView，我想在我的TreeView箭头中添加动画，并在CSS中添加一些额外的代码，如下所示：

var-toggler=document.getElementsByClassName（“插入符号”）；
var i；
对于（i=0；i

ul，
#密尔{
列表样式类型：无；
}
#密尔{
保证金：0；
填充：0；
}
插入符号{
光标：指针；
-webkit用户选择：无；
/*Safari 3.1+*/
-moz用户选择：无；
/*火狐2+*/
-ms用户选择：无；
/*IE 10+*/
用户选择：无；
}
插入符号：之前{
内容：“\f061”；
颜色：黑色；
显示：内联块；
右边距：6px；
字体系列：“FontAwesome”；
变换：旋转（0度）；
动画：向上旋转0.1s线性；
}
.caret down：：之前{
-ms变换：旋转（45度）；
/*IE 9*/
-webkit变换：旋转（45度）；
/*狩猎*/
'
变换：旋转（45度）；
动画：降速0.1s线性；
}
/*我被添加到CSS代码下面*/
@关键帧向下旋转{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
12.5% {
-webkit变换：旋转（5度）；
变换：旋转（5度）；
}
25% {
-webkit变换：旋转（10度）；
变换：旋转（10度）；
}
37.5% {
-webkit变换：旋转（20度）；
变换：旋转（20度）；
}
50% {
-webkit变换：旋转（25度）；
变换：旋转（25度）；
}
50.5% {
-webkit变换：旋转（35度）；
变换：旋转（35度）；
}
75% {
-webkit变换：旋转（40度）；
变换：旋转（40度）；
}
100% {
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
}
/*我被添加到CSS代码下面*/
@关键帧向上旋转{
0% {
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
12.5% {
-webkit变换：旋转（40度）；
变换：旋转（40度）；
}
25% {
-webkit变换：旋转（35度）；
变换：旋转（35度）；
}
37.5% {
-webkit变换：旋转（25度）；
变换：旋转（25度）；
}
50% {
-webkit变换：旋转（20度）；
变换：旋转（20度）；
}
50.5% {
-webkit变换：旋转（10度）；
变换：旋转（10度）；
}
75% {
-webkit变换：旋转（5度）；
变换：旋转（5度）；
}
100% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
}
.嵌套{
显示：无；
}
.主动{
显示：块；
}

饮料

水
咖啡
茶

红茶
白茶
绿茶

森查
Gyokuro
抹茶
皮洛春

问题在于，一旦元素显示在页面上，动画就会开始。因此，发生这种情况时，必须将动画属性重置为初始值。此css代码禁用动画

.active .caret.caret-down::before {
    animation: initial;
}

---

也许这不是回答此问题的正确方法，但另一种方法是使用过渡，而不是关键帧动画。看起来，您正在做的事情远远超过了设置45度旋转动画的必要性

var-toggler=document.getElementsByClassName（“插入符号”）；
var i；
对于（i=0；i

ul，
#密尔{
列表样式类型：无；
}
#密尔{
保证金：0；
填充：0；
}
插入符号{
光标：指针；
-webkit用户选择：无；
/*Safari 3.1+*/
-moz用户选择：无；
/*火狐2+*/
-ms用户选择：无；
/*IE 10+*/
用户选择：无；
}
插入符号：之前{
内容：“\f061”；
颜色：黑色；
显示：内联块；
右边距：6px；
字体系列：“FontAwesome”；
变换：旋转（0度）；
过渡：所有0.1s线性；
}
.caret down：：之前{
变换：旋转（45度）；
}
.嵌套{
显示：无；
}
.主动{
显示：块；
}

饮料

水
咖啡
茶

红茶
白茶
绿茶

森查
Gyokuro
抹茶
皮洛春

您的意思是孩子们如何不会因为父母被用来折叠而返回到折叠状态？不确定您所说的不需要的动画。当您运行示例并单击可展开节点时，子节点上会出现不需要的动画，例如，当您打开第一个节点（

饮料

）并精确查看最后一个节点（

茶

）您看到了FF60中未显示的额外折叠动画。我可以看到所有箭头都已设置动画，但没有额外的折叠动画。可能是浏览器相关的东西？你测试过哪些浏览器？@David获得动画未点击节点是额外的动画。我添加了gif以澄清问题。你能给出完整的答案吗？