CSS Translate мигает при вводе мышью и отпускании мышью - PullRequest
Новая
       12

CSS Translate мигает при вводе мышью и отпускании мышью

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

Я знаю, что уже есть много проблем, связанных с моей, но мне просто не удалось исправить это.Может быть, мой подход 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'
    });
  });

};

1 Ответ

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

Мне удалось решить проблему.Удалите анимируемый элемент перед запуском следующего.

РЕШЕНИЕ: 

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