javascript - CSS 翻译在 mouseenter 和 mouseleave 上闪烁

Question

我知道已经有很多与我相关的问题，但我只是没能解决它。也许我的 JS 方法不是最好的，可能会导致闪烁，我愿意寻求更好的解决方案。

如果您开始尝试移动，您很快就会发现它有时会闪烁。我确实设法减少了闪烁的数量，但它有时仍然会发生。

https://codepen.io/anon/pen/zmoeeB

HTML

<div class="container">
  <ul>
    <li class="nav-item">
      <a href="#">
        <div><span>@</span> <span>Item 1</span></div>
      </a>
    </li>
    <li class="nav-item">
      <a href="#">
        <div><span>@</span> <span>Item 2</span></div>
      </a>
    </li>
    <li class="nav-item active current">
      <a href="#">
        <div><span>@</span> <span>Item 3</span></div>
      </a>
    </li>
    <li class="nav-item">
      <a href="#">
        <div><span>@</span> <span>Item 4</span></div>
      </a>
    </li>
    <li class="nav-hover"></li>
  </ul>
</div>

CSS

.container {
  height:100%;
  width:100%;
  max-width:200px;
  position:relative;
}

ul {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

li {
  display:block;
  width:100%;
  height:100%;
}

.nav-item a {
  height:100%;
  width:100%;
  display:block;
  text-decoration:none;
}

.nav-item a, .nav-item.active a {
  color:black;
}

.nav-item.current a{
  color:white;
}

.nav-hover {
  position:absolute;
  width:100%;
  height:28px;
  background-color:red;
  z-index:-1;
}

.nav-item a div {
  padding:5px;
}

.nav-hover {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 0);
  transform: translateZ(0);
}

JS

$active = document.querySelector(".active");
$current = document.querySelector(".nav-hover");
$items = document.querySelectorAll(".nav-item");
$nav = document.querySelector(".container ul");

$current.style.top = $active.offsetTop+'px';

for(var i = 0; i < $items.length; i++){

  $items[i].addEventListener('mouseenter', function(){
    $active.classList.remove('current');
    this.classList.add('current');
    var navHover = anime({
      targets: $current,
      translateY: (this.offsetTop - $current.offsetTop)+'px'
    });
  });

  $items[i].addEventListener('mouseleave', function(){
    this.classList.remove('current');
    $active.classList.add('current');
  });

  $nav.addEventListener('mouseleave', function(){
    var navHover = anime({
      targets: $current,
      translateY: ($active.offsetTop - $current.offsetTop)+'px'
    });
  });

};

Answer 1

我能够解决这个问题。在运行下一个之前删除要设置动画的元素。

解决方案:

anime.remove($animatedDiv);
anime({
      targets: $div,
      translateY: 200
    });