CSS微动画 - 不知道要吃什麽？Slot帮你选吧

Q: 网路上已经很多可以用的随机选择器了耶...
A: 拉霸的用途很多，看你怎麽用罗～

已经连续Ｎ篇Loading，本篇跳过Loading篇章，脑袋要来点新东西，今天做个拉霸～掌握好拉霸技巧，无法决定要吃什麽的时候、决定倒霉鬼是谁的时候，就靠它吧！

样式要先出来罗～

首先，切版及样式是最重要的！以.result给定容器的高度，内部的.result-txt设定背景色，再以.result-item包着每个结果，最重要的就是要对.result下overflow: hidden，这时候所有我们要的元素都有了！

<style>
  .results {
    width: 60px;
    color: #fff;
  }
  .result {
    height: 70px;
    border-radius: 4px;
    border: 2px solid gray;
    overflow: hidden;
  }
  .result-txt {
    background: linear-gradient(LightCoral, Gold, LightSkyBlue, LightCoral);
  }
  .result-item {
    font-size: 48px;
    display: flex;
    justify-content: center;
    line-height: 70px;
  }
  .btn-start,
  .btn-stop {
    text-align: center;
    margin: 20px 0;
    line-height: 30px;
    border-radius: 4px;
    background: linear-gradient(DarkGray, DimGray);
    cursor: pointer;
  }
  .btn-start:hover,
  .btn-stop:hover {
    transform: scale(1.05);
  }
</style>
  
<div class="results">
  <div class="btn-start" onclick="startAnimation()">Start</div>
  <div class="result">
    <div class="result-txt is-play" id="result">
      <div class="result-item">1</div>
      <div class="result-item">2</div>
      <div class="result-item">3</div>
      <div class="result-item">4</div>
      <div class="result-item">5</div>
      <div class="result-item">6</div>
      <div class="result-item">7</div>
      <div class="result-item">8</div>
      <div class="result-item">9</div>
      <div class="result-item">10</div>
    </div>
  </div>
  <div class="btn-stop" onclick="stopAnimation()">Stop</div>
</div> 

再来就是要让拉霸会动

下面第一张图可以看到其实内部的.result-item并没有隐藏掉，只是因为外层的.result设置height: 70px并下了overflow: hidden，所以超出容器的的元素都看不见，这时候要让拉霸跑起来，就可以针对.result-txt做位移。

<style>
  .is-play.result-txt {
    animation: resultPlay 1s infinite linear;
  }

  @keyframes resultPlay {
    100% {
      transform: translateY(-90%)
    }
  }
</style>

为什麽这里的translateY不是设置-100%呢？为什麽是负的呢？

• 如果是-100%的话，那麽就会超出整个元素，这样跑起来就会几个瞬间是空白的。
• 如果要将元素向上位移，则 Y 轴要设置负的，Y 轴正的位移会让元素往下掉。

最後可以来点js的辅助完成随机选择

当触发startAnimation()方法的时候，会去document寻找id为result的元素，如果有找到元素，则对元素新增.is-play，并且将元素上的transform属性设置为none，这时候拉霸就会开始跑了！

<script>
  function startAnimation() {
    if (document.getElementById(`result`)) {
      document.getElementById(`result`).classList.add('is-play');
      document.getElementById(`result`).style.transform = 'none';
    }
  }
</script>

第二段就是随机比较重要的部分了，跟startAnimation()一样先寻找id为result的元素，然後以Math.random取得随机数(0 <= item < 1)乘以10後以Math.floor无条件舍去小数位，就会得到 0 - 9 任一随机数字，接着对元素设定style，拉霸就完成了！

<script>
  function stopAnimation() {
    if (document.getElementById(`result`)) {
      const num = Math.floor(Math.random() * 10);
      document.getElementById(`result`).classList.remove('is-play');
      document.getElementById(`result`).style.transform = `translateY(${-num * 10}%)`;
    }
  }
</script>

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！