如何将元素翻译成里程表

Posted 2021-04-21

我有代码：

  <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/

但我想表现得像里程表 - 数字只能滚动到顶部，而不是底部。任何想法，怎么做？

答案

正如@codyThompsonDev所说，翻转区域是实现这一目标的最佳方式。我认为他错过了一些东西，当你从翻滚号码转到非翻滚号码时会发生什么。

例如，让我们说里程表随机试图滚动到4，然后3，然后1。第一次，它可以滚到4没问题。第二次，它必须在翻转区域滚动到“13”。但是，它试图滚动到“11”，这也是翻转区域，导致它向后滚动。

要在这些情况下实现此效果，您必须将拨盘从翻转区域中取出，然后再次前滚。我会用window.requestAnimationFrame()实现这个。

我做了一个小提琴来证明这一点：https://jsfiddle.net/tprobinson/8k125fmz/67/

将debugBackground类添加到dupa2以直观地查看翻转效果。

我建议使用像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>

另一答案

您可以使用两组数字和一些额外的javascript来实现此效果。

如果新数字小于当前数字，请使用更远的第二组数字（数字0-9）。当css动画从第一组数字转换到第二组时，它看起来好像里程表正在“滚动”。

动画完成后，切换回第一组数字而不进行动画处理（无过渡类）。

我根据你原来的jsfiddle制作了一个工作实例。

注意：这使用了DOM元素的.classList属性和tranistionend事件。您可能必须添加供应商前缀（即webkitTransitionEnd）并实施您自己的.classList版本，具体取决于您需要支持的浏览器。

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

function randomize() {
  setNumber(Math.floor(Math.random() * 9));
}

function setNumber(newNumber) {
  let dupa = document.getElementById("cipa");

  // assumes dupa.dataset.num always be a valid int
  let selected = parseInt(dupa.dataset.num);

  if (newNumber === selected) return; // if same as existing, don't do anything

  // if the new number is less than the old number
  // use the second set of numbers to avoid moving "backwards"
  if (newNumber < selected) dupa.classList.add("rolledover");

  // animate to the new position
  dupa.classList.add("transitioning");
  dupa.dataset.num = "" + newNumber;
}

function transitionEnd() {
  let dupa = document.getElementById("cipa");
  // don't animate
  dupa.classList.remove("transitioning");
  dupa.classList.remove("rolledover");
}

将 ARB 程序集翻译成 GLSL？

 为什么我不能在此片段中生成唯一对象数组？
 Scala Slick 如何将 Scala 代码翻译成 JDBC？
 如何将这些伪 unicode 数据声明代码翻译成 MASM 风格的代码？
 如何将 Apple API 文档翻译成现实生活中的代码？
 编译原理--语法制导翻译器