javascript - 如何将元素翻译成里程表

Question

我有代码:

  <div class="wrap2" id="wrap" data-num="0">
    <span>0</span><span>1</span>...

CSS:

.wrap2[data-num="0"] {
  transfom:translate(0, 0);
}
.wrap2[data-num="1"] {
  transform:translate(0, -30px);
  }

https://jsfiddle.net/9t4zsuov/2/

但我想像一个里程表一样 - 数字只能滚动到顶部，而不是底部。任何想法，如何做到这一点？

Answer 1

正如@codyThompsonDev 所说，翻转区域是实现这一点的最佳方式。不过，我认为他错过了一些事情，那就是当您从滚动号码变为非滚动号码时会发生什么。

例如，假设里程表随机尝试滚动到 4，然后是 3，然后是 1。第一次，它可以滚动到 4 没问题。第二次，它必须在翻转区滚动到“13”。但随后，它会尝试滚动到也在翻转区中的“11”，导致它向后滚动。

要在这些情况下实现此效果，您必须将拨盘弹回翻滚区域，然后再次向前翻滚。我会使用 window.requestAnimationFrame() 来实现它。

我制作了一个 fiddle 来演示:https://jsfiddle.net/tprobinson/8k125fmz/67/

在dupa2中添加debugBackground类，可以直观的看到翻转效果。

我建议使用 Sass 这样的预处理器生成 CSS 类，因为手写它们也容易出错。

document.getElementById("rand").addEventListener("click", randomize);

const debug = document.getElementById("debug");
const dupa = document.getElementById("cipa");

let animationInProgress = null

function setDebug(num) {
  debug.textContent = 'Number is really: ' + num
}

function animateOdometer(newNum) {
  // Add the smooth class and set the number to let it roll.
  dupa.classList.add('smooth')
  setDebug(newNum)
  dupa.dataset.num = newNum

  // In 1000 ms, remove the smooth class
  animationInProgress = window.setTimeout(() => {
    dupa.classList.remove('smooth')
    animationInProgress = null
  }, 1000)
}

function randomize() {

  let oldNum = Number.parseInt(dupa.dataset.num)
  if (oldNum === undefined || oldNum === null) {
    oldNum = 0
  }

  let newNum = Math.floor(Math.random() * 9) + 0;

  // If an animation is already in progress, cancel it
  if (animationInProgress) {
    window.clearTimeout(animationInProgress)
    dupa.classList.remove('smooth')
    animationInProgress = null
  }

  // If the new number is before our old number
  // we have to force a roll forwards
  if (newNum < oldNum) {
    newNum += 10
  }

  if (oldNum > 9) {
    // The dial was already rolled over. We need to
    // snap the dial back before rolling again.
    // Wait for a frame so we can snap the dial back
    dupa.dataset.num = oldNum - 10
    setDebug(oldNum - 10)
    dupa.classList.remove('smooth')

    window.requestAnimationFrame(() => {
      // Wait for one frame to let the snapback happen
      window.requestAnimationFrame(() => {
        // Then roll forward
        animateOdometer(newNum)
      })
    })

    return
  }

  // Roll the dial
  animateOdometer(newNum)
}

#rand,
#debug {
  margin-top: 50px;
}

.dupa1 {
  height: 30px;
  width: 30px;
  border: 1px solid #000;
  overflow: hidden;
}

.dupa2.smooth {
  transition: all 1s ease;
}

.dupa2 span {
  height: 30px;
  width: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
}

.dupa2.debugBackground {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #207cca 51%, #207cca 100%);
}

.dupa2[data-num="0"] {
  transform: translate(0, 0);
}

.dupa2[data-num="1"] {
  transform: translate(0, -30px);
}

.dupa2[data-num="2"] {
  transform: translate(0, -60px);
}

.dupa2[data-num="3"] {
  transform: translate(0, -90px);
}

.dupa2[data-num="4"] {
  transform: translate(0, -120px);
}

.dupa2[data-num="5"] {
  transform: translate(0, -150px);
}

.dupa2[data-num="6"] {
  transform: translate(0, -180px);
}

.dupa2[data-num="7"] {
  transform: translate(0, -210px);
}

.dupa2[data-num="8"] {
  transform: translate(0, -240px);
}

.dupa2[data-num="9"] {
  transform: translate(0, -270px);
}

.dupa2[data-num="10"] {
  transform: translate(0, -300px);
}

.dupa2[data-num="11"] {
  transform: translate(0, -330px);
}

.dupa2[data-num="12"] {
  transform: translate(0, -360px);
}

.dupa2[data-num="13"] {
  transform: translate(0, -390px);
}

.dupa2[data-num="14"] {
  transform: translate(0, -420px);
}

.dupa2[data-num="15"] {
  transform: translate(0, -450px);
}

.dupa2[data-num="16"] {
  transform: translate(0, -480px);
}

.dupa2[data-num="17"] {
  transform: translate(0, -510px);
}

.dupa2[data-num="18"] {
  transform: translate(0, -540px);
}

.dupa2[data-num="19"] {
  transform: translate(0, -570px);
}

<div class="dupa1">
  <div class="dupa2" id="cipa" data-num="0">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
  </div>
</div>

<div id="debug">
  Number is really: 0
</div>

<button id="rand">rand</button>