时间戳

首页 > 解决方案 > 删除多余的 CSS 动画

javascript - 删除多余的 CSS 动画

问题描述

我正在尝试根据 w3.com 的这个很棒的链接制作我自己的 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 TeaBeveragesTeaGreen Tea

请参阅 gif 以获得说明：
显示额外的动画

标签： javascripthtmlcsscss-animations

解决方案

也许这不是回答这个问题的正确方法，但另一种方法是使用过渡而不是关键帧动画。看起来你做的不仅仅是动画 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>

推荐阅读