Удаление избыточной CSS-анимации - PullRequest
Новая
       10

Удаление избыточной CSS-анимации

0 голосов
/ 09 октября 2018

Я пытаюсь создать свой собственный TreeView на основе этой потрясающей ссылки с w3.com, я хотел добавить анимацию к стрелке моего 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 для уточнения:showing extra animation

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Возможно, это неправильный способ ответить на этот вопрос, но альтернативный способ сделать это - использовать переход, а не анимацию ключевого кадра.Кажется, что вы делаете намного больше, чем просто необходимо, чтобы оживить поворот на 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>
0 голосов
/ 09 октября 2018

Проблема в том, что анимация запускается, как только элемент отображается на странице.Таким образом, вы должны сбросить свойство animation к начальному значению, когда это произойдет.Этот код CSS отключает анимацию. 

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