javascript - 如何使字母的赌场式增量？

Question

我需要转换(当用户做某事时):

adcb

到(每个字母的下一个字母):

bedc

目前我正在使用 javascript并覆盖字符。

还记得 Pkmn 游戏 Angular 吗？

如果我们可以模拟 Angular 色的移动(图中，从 7 变成皮卡丘)，那不是很酷吗？

PS - 我不知道如何处理这个...

Answer 1

这可以通过 CSS 动画来实现，以移动字母，在字母不可见时更新字母。

jsfiddle

HTML:

<div id="reels">
  <div>A</div>
  <div>L</div>
  <div>E</div>
  <div>X</div>
</div>
<button id="slide">Slide</button>

CSS:

#reels > div {
  width: 20px;
  height:30px;
  overflow:hidden;
  padding:3px;
  display:inline-block;
}

#reels > div.reel-change {
  animation: slideReel 1s 1;
}

@keyframes slideReel {
  0% {
      transform: translateY(0);
  }
  49% {
      transform: translateY(-30px);
  }
  50% {
      transform: translateY(30px);
  }
  100 % {
      transform: translateY(0px);
  }
}

#reels {
  margin-bottom:10px;
}

JavaScript:

$(function() {
    $('#slide').click(function() {
    var delay = 0;
    $('#reels').children().each(function() {
        var reel = this;
        setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay);
      setTimeout(function() {
        changeLetter(reel);
      }, delay + 500);
      setTimeout(function() {
        $(reel).toggleClass("reel-change");
      }, delay + 1000);
      delay += 500;
    });
  });
});

function changeLetter(el) {
      el.innerHTML = incrementChar(el.innerHTML);
}

var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
function incrementChar(c) {
    var index = alphabet.indexOf(c);
    return alphabet[index + 1] || alphabet[0];
}

编辑:鉴于根据您的上述评论，这是一个很好的理由，我让它变得更漂亮了!!

https://jsfiddle.net/bigalreturns/ctuujz3j/2/