删除多余的CSS动画

Question

我正在尝试基于w3.com上的this很棒的链接制作自己的TreeView，我想在TreeView的箭头中添加动画，并在CSS中添加一些额外的代码，如下所示：

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\f061";
  color: black;
  display: inline-block;
  margin-right: 6px;
  font-family: 'FontAwesome';
  transform: rotate(0deg);
  animation: spin-up 0.1s linear;
}

.caret-down::before {
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari */
  '
 transform: rotate(45deg);
  animation: spin-down 0.1s linear;
}


/*I've been added below CSS code*/

@keyframes spin-down {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  37.5% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  50.5% {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
  }
  75% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}


/*I've been added below CSS code*/

@keyframes spin-up {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  12.5% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  25% {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
  }
  37.5% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  50% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  50.5% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  75% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.nested {
  display: none;
}

.active {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

但是不幸的是，我有多余的动画，为了看到问题，展开所有节点并折叠主节点（Beverages）时，将所有其他节点都展开（Tea，Green Tea）您再次扩展了Beverages节点.. !!您可以在Tea和Green Tea上看到多余的动画。这是我的问题。我该如何解决？

  

有关说明，请参见gif：
  

Answer 1

也许这不是回答此问题的正确方法，但是另一种替代方法是使用过渡而不是关键帧动画。似乎仅对45度旋转进行动画处理就做得比必要的多。

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\f061";
  color: black;
  display: inline-block;
  margin-right: 6px;
  font-family: 'FontAwesome';
  transform: rotate(0deg);
  transition:all 0.1s linear;
}

.caret-down::before {
 transform: rotate(45deg);
}

.nested {
  display: none;
}

.active {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

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

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