如何将元素翻译成里程表

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() 来实现它。

我做了一个小提琴来证明这一点：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>

Answer 2

你可以使用两组数字和一点额外的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");
}

#rand {
  margin-top: 50px;
}

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

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

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

.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);
}

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

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

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

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

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

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

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

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

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

.rolledover.dupa2[data-num="9"] {
  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>

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

Answer 3

非常感谢。

但我遇到了另一个类似的问题，但与数组有关。

为了更好地解决问题，我做了一个小提琴：https://jsfiddle.net/zr2dLbge/

<div class="wrap" id="wrap"></div>

.wrap{
  border:1px solid #000;
  display: inline-block;
  height:30px;
  border-right: none;
}
.numbers{
   width:30px;
  height:30px;
  display:inline-block;
  overflow: hidden;
  border-right: 1px solid #000;
}
.numbers span{
  display: block;
  width:30px;
  height:30px;
  line-height: 30px;
  text-align: center;
}

.numbers[data-num="0"] div{
  transform: translate(0, 0);
  transition: all 1s ease;
}

.numbers[data-num="1"] div{
  transform: translate(0, -30px);
  transition: all 1s ease;
}

.numbers[data-num="2"] div{
  transform: translate(0, -60px);
  transition: all 1s ease;
}

.numbers[data-num="3"] div{
  transform: translate(0, -90px);
  transition: all 1s ease;
}

.numbers[data-num="4"] div{
  transform: translate(0, -120px);
  transition: all 1s ease;
}

.numbers[data-num="5"] div{
  transform: translate(0, -150px);
  transition: all 1s ease;
}

.numbers[data-num="6"] div{
  transform: translate(0, -180px);
  transition: all 1s ease;
}

.numbers[data-num="7"] div{
  transform: translate(0, -210px);
  transition: all 1s ease;
}

.numbers[data-num="8"] div{
  transform: translate(0, -240px);
  transition: all 1s ease;
}

.numbers[data-num="9"] div{
  transform: translate(0, -270px);
  transition: all 1s ease;
}

let arr = [];
var numbers = 1234561234;
const wrap = document.getElementById("wrap");

function toArray (val) {

  return (val).toString().split('');
}

arr = toArray(numbers);

for (let i = 0; i < arr.length; i++) {
    div = document.createElement('div'),
    div.className = "numbers";
    div.dataset.num = arr[i];
    div.dataset.x = i;
    div.innerHTML = "<div><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>"
    wrap.appendChild(div);
}


setInterval(function(){ 
arr.forEach( (k) => {
  arr[k] = Math.floor(Math.random() * 9) + 0;
})

for (let i = 0; i < arr.length; i++) {
    document.querySelector('.numbers[data-x="'+i+'"]').dataset.num = arr[i];
}
 }, 1000);

不幸的是 window.requestAnimationFrame() 在这种情况下对我不起作用