javascript - 单击可转到实时动画中的下一个位置

Question

我创建了一个从右到左的动画，我试图在单击下一个框按钮时添加一些跳转。

如何使用 JavaScript 应用它？

nextBox 函数应该应用从 box1 到 box2 的跳转，依此类推...(例如)

const nextBox = () => {
  alert("nextBox");
  // replace => Jump to next box position +=100px to right
};

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: aqua;
  height: fit-content;
  width: 500px;
  overflow-x: hidden;
  position: relative;
}

.anim {
  animation: anim 30s infinite linear;
  display: flex;
}

.anim > .box {
  width: 90px;
  height: 90px;
  margin: 5px;
  background-color: blue;
  flex-shrink: 0;
}

.container > button {
  position: absolute;
  left: 0px;
  top: 32px;
  width: 50px;
}

@keyframes anim {
  to {
    transform: translateX(-1000px);
  }
}

<div class="container">
  <div class="anim">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <button onclick="nextBox()">next box</button>
</div>

codepen here

Answer 1

以下实现应该可以工作，因为它可以满足您的要求。

这里我们有另一个 boxContainer div 来应用 transition 并让 animation 保留在 anim 类包装器上分区我们还可以有另一个 pseudoBox 类的 div，我们将其 width 增加 100px 以填充我们的空白间距。稍后遇到并保持 box div 的顺序不变，我们继续以循环方式在末尾附加 first box 类 div。为了更好地理解，我对盒子进行了编号。所以我们原来的 box div 数量保持不变。

let jump = 0;
const anim = document.querySelector('.anim');
const boxContainer = document.querySelector('.boxContainer');
const pseudoBox = document.querySelector('.pseudoBox');

const animate = () => {
  boxContainer.style.transform = `translate(${jump}px)`;
  pseudoBox.style.width = `${jump*-1}px`;
  boxContainer.appendChild(boxContainer.children[1]);
}

const nextBox = () => {
  jump -= 100;
  requestAnimationFrame(animate);
};

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: aqua;
  height: fit-content;
  width: 500px;
  overflow-x: hidden;
  position: relative;
}

.anim {
  animation: anim 30s infinite linear;
}

.pseudoBox {
  flex-shrink: 0
}

.boxContainer {
  display: flex;
  transition: transform 0.2s;
}

.boxContainer>.box {
  width: 90px;
  height: 90px;
  margin: 5px;
  background-color: blue;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container>button {
  position: absolute;
  left: 0px;
  top: 32px;
  width: 50px;
}

@keyframes anim {
  to {
    transform: translateX(-1000px);
  }
}

<div class="container">
  <div class="anim animateStuff">

    <div class="boxContainer">
      <div class="pseudoBox"></div>
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
      <div class="box">11</div>
      <div class="box">12</div>
      <div class="box">13</div>
      <div class="box">14</div>
      <div class="box">15</div>
      <div class="box">16</div>
    </div>
  </div>
  <button onclick="nextBox()">next box</button>
</div>