移动速度更快时无限旋转木马的奇怪行为

Question

我想做一个类似带有“移动圆圈”的无限旋转木马的东西。它确实有效，但我希望当我将鼠标悬停在左侧字段上时，圆圈移动得更快。这也确实有效，但它有一个奇怪的行为：看起来有另一条圆圈一直移动得更快，而另一条圆圈则正常移动，当我将鼠标悬停在田野上时，“正常”圆圈是不可见的并且速度更快-移动的东西是可见的，当我搬出去时，反之亦然。 （希望大家明白我的意思。）

我希望当我将鼠标悬停在田野上时，圆圈移动得更快，但不会出现这种奇怪的行为。

将鼠标悬停在左侧字段上时，圆圈移动速度更快，但方式与预期不同

var left = document.querySelector(".left");
var one = document.querySelector("#one");
var two = document.querySelector("#two");

left.addEventListener("mouseover", () => {
  one.style.animationDuration = "10s";
  two.style.animationDuration = "10s";
})

left.addEventListener("mouseout", () => {
  one.style.animationDuration = "30s";
  two.style.animationDuration = "30s";
})

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
  z-index: 10;
}

.moving-circles {
  overflow: hidden;
  margin: 24px -128px;
  padding: 24px 0;
  white-space: nowrap;
  background: #fff;
  position: relative;
}

.first-row {
  display: inline-block;
  animation: 30s slide infinite linear;
}

.first-row a {
  margin: 0 4px;
  text-decoration: none;
}

.first-row span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  height: 120px;
  width: 120px;
  border-radius: 1000px;
  border: 1px solid #000;
  margin: 0 40px;
}

<nav class="moving-circles">
  <div class="left"></div>
  <div class="first-row" id="one">
    <a href="#">
      <span>0</span>
    </a>
    <a href="#">
      <span>1</span>
    </a>
    <a href="#">
      <span>2</span>
    </a>
    <a href="#">
      <span>3</span>
    </a>
    <a href="#">
      <span>4</span>
    </a>
    <a href="#">
      <span>5</span>
    </a>
    <a href="#">
      <span>6</span>
    </a>
    <a href="#">
      <span>7</span>
    </a>
    <a href="#">
      <span>8</span>
    </a>
    <a href="#">
      <span>9</span>
    </a>
  </div>
  <div class="first-row" id="two">
    <a href="#">
      <span>0</span>
    </a>
    <a href="#">
      <span>1</span>
    </a>
    <a href="#">
      <span>2</span>
    </a>
    <a href="#">
      <span>3</span>
    </a>
    <a href="#">
      <span>4</span>
    </a>
    <a href="#">
      <span>5</span>
    </a>
    <a href="#">
      <span>6</span>
    </a>
    <a href="#">
      <span>7</span>
    </a>
    <a href="#">
      <span>8</span>
    </a>
    <a href="#">
      <span>9</span>
    </a>
  </div>
</nav>

<script src="move-faster.js"></script>

Answer 1

这是因为你使用了错误的事件。
您应该使用

mouseenter

和

mouseleave

代替...

const
  left = document.querySelector(".left")
, one  = document.querySelector("#one")
, two = document.querySelector("#two")
  ;
left.addEventListener("mouseenter", () =>
  {
  one.style.animationDuration = "10s";
  two.style.animationDuration = "10s";
  })
left.addEventListener("mouseleave", () => 
  {
  one.style.animationDuration = "30s";
  two.style.animationDuration = "30s";
  })

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
  z-index: 10;
}

.moving-circles {
  overflow: hidden;
  margin: 24px -128px;
  padding: 24px 0;
  white-space: nowrap;
  background: #fff;
  position: relative;
}

.first-row {
  display: inline-block;
  animation: 30s slide infinite linear;
}

.first-row a {
  margin: 0 4px;
  text-decoration: none;
}

.first-row span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  height: 120px;
  width: 120px;
  border-radius: 1000px;
  border: 1px solid #000;
  margin: 0 40px;
}

<nav class="moving-circles">
  <div class="left"></div>
  <div class="first-row" id="one">
    <a href="#"><span>0</span></a>
    <a href="#"><span>1</span></a>
    <a href="#"><span>2</span></a>
    <a href="#"><span>3</span></a>
    <a href="#"><span>4</span></a>
    <a href="#"><span>5</span></a>
    <a href="#"><span>6</span></a>
    <a href="#"><span>7</span></a>
    <a href="#"><span>8</span></a>
    <a href="#"><span>9</span></a>
  </div>
  <div class="first-row" id="two">
    <a href="#"><span>0</span></a>
    <a href="#"><span>1</span></a>
    <a href="#"><span>2</span></a>
    <a href="#"><span>3</span></a>
    <a href="#"><span>4</span></a>
    <a href="#"><span>5</span></a>
    <a href="#"><span>6</span></a>
    <a href="#"><span>7</span></a>
    <a href="#"><span>8</span></a>
    <a href="#"><span>9</span></a>
  </div>
</nav>
<!--
<script src="move-faster.js"></script>
-->