jquery - anime.js结束后，如何重置颜色属性，以便正常的悬浮颜色起作用？

Question

我试图将鼠标悬停在右上角的链接上，如http://carlosgnotario.com/所示。运动可能会更接近一点，但我对结果感到满意。我唯一不能做的是，动画结束后，如果鼠标悬停，颜色怎么能保持红色？

我尝试过在mouseleave上使用侦听器重置颜色，并使用CSS进行重新调整，但是它不起作用。

$("a").on("mouseenter", animate);

function animate() {
  var timeline = anime.timeline({
    direction: "alternate",
    loop: false
  }).add({
    targets: ".letter",
    translateY: [0, 4],
    translateX: [0, 4],
    opacity: [1, 0],
    color: ["#000", "#f01"],
    easing: "easeInOutQuad",
    duration: 200,
    delay: function(el, i) {
      return 30 * i;
    }
  }).add({
    targets: ".letter",
    translateY: [4, 0],
    translateX: [4, 0],
    opacity: [0, 1],
    color: ["#f01", "#000"],
    easing: "easeInOutQuad",
    duration: 200,
    delay: function(el, i) {
      return 30 * i;
    }
  });
}

ul {
  list-style-type: none;
}

ul li a {
  font-size: 72px;
  font-family: "Rubik", sans-serif;
  font-weight: 900;
  color: #000;
  text-decoration: none;
}

ul li a.letter {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<ul>
  <li>
    <a href="#">
      <span class="letter">A</span>
      <span class="letter">b</span>
      <span class="letter">o</span>
      <span class="letter">u</span>
      <span class="letter">t</span>
    </a>
  </li>
</ul>

Current Codepen example

Answer 1

只需更改Javascript函数以消除颜色，更改查找范围以查找ul