Координаты сверху и слева не работают для getBoundingClientRect () - Javascript - PullRequest
Новая
       44

Координаты сверху и слева не работают для getBoundingClientRect () - Javascript

0 голосов
/ 04 мая 2020

У меня есть меню, в котором я бы хотел, чтобы полоса подсветки трансформировалась между элементами меню на навигационной панели (чтобы подсветка плавно переходила от одного пункта меню к другому при наведении курсора на каждый элемент меню).

Я могу получить его так, чтобы 'highlight' изменял высоту и ширину в соответствии с .nav-link nav-item, но я не могу представить координаты позиционирования X и Y для работы с использованием свойства transform.

Любая помощь была бы потрясающей.

Эмили

Кодовая ручка: https://codepen.io/emilychews/pen/QWjOxKz

// SELECT NAV-LINKS AND CREATE A SPAN
var navLinks = document.querySelectorAll(".nav-link"),
  theHighlight = document.createElement("span");
  
// ADD CLASS TO SPAN AND APPEND TO BODY
theHighlight.classList.add("highlight");
document.body.append(theHighlight);

// MOVE THE HIGHLIGHT TO THE NAV LINKS X/Y COORDINATES AND MATCH WIDTH AND HEIGHT
function moveHighlight() {

  var linkCoords = this.getBoundingClientRect();

  var coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };

  theHighlight.style.width = `${coords.width}px`;
  theHighlight.style.height = `${coords.height}px`;
  theHighlight.style.transform = `translate(${coords.left}px, translate(${coords.top}px)`;
}

// CALL moveHighlight() FUNCTION ON MOUSEENTER
navLinks.forEach(a => a.addEventListener('mouseenter', moveHighlight))
.menu-items {
  display: flex;
  list-style: none;
}

.nav-link {
  margin-left: 2rem;
  display: inline-block;
  position: relative;
}

/* ADDED WITH JAVASCRIPT */
.highlight {
  top: 0;
  left: 0;
  background: red;
  transition: all 0.2s;
  display: block;
  position: absolute;
}
<body>
  <header>
    <nav class="n">
      <ul class="menu-items">
        <li><a class="nav-link" href="#">HOME</a></li>
        <li><a class="nav-link" href="#">WORK</a></li>
        <li><a class="nav-link" href="#">PROCESS</a></li>
        <li><a class="nav-link" href="#">CONTACT</a></li>
      </ul>
    </nav>
  </header>
</body>

1 Ответ

1 голос
/ 04 мая 2020

Ваша строка преобразования, translate(${coords.left}px, translate(${coords.top}px) не является допустимым css transform значением.

При замене переменных на фактические значения сгенерированная строка будет выглядеть примерно так: translate(80px, translate(16px).

Вместо этого вам нужно что-то вроде: translate(80px, 16px), это означает, что ваш код должен быть: 

theHighlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
...