CSS微动画 - Slot的变化！数字钟也可以动起来

Q: 动画影片看起来卡卡的？
A: 请各位见谅，跑起来真真是顺畅的呢！

上一篇的Slot效果以父层固定宽高後设置overflow: hidden，同时子层设定animation让元素位移至父层以外的范围，以达到Slot的效果。本篇以相同的概念做出数字中，在数字跳动的时候，数字有替换的效果！本篇会有比较多的javascript程序来操作元素内的文字，也以javascript操控css的animation-play-state来完成本次的实作。

样式先出来

首先将每个字元都以.clock-txt包起来，并针对每个会显示数字的元素添加id，记住id必须是唯一值！然後将.clock-txt的父层.clock-item以上一篇Slot的概念设置高度後设定overflow: hidden。

<style>
  .clock {
    display: flex;
    background-color: NavajoWhite;
  }
  .clock-item,
  .clock-symbol {
    display: flex;
    margin: 5px;
    width: 50px;
    line-height: 70px;
    font-size: 48px;
    justify-content: center;
  }
  .clock-item {
    background-color: FloralWhite;
    border: 2px solid Chocolate;
    border-radius: 10px;
    box-shadow: 0 0 6px 1px SaddleBrown;
    overflow: hidden;
  }
</style>

<div class="clock is-active">
  <div class="clock-item">
    <div class="clock-txt" id="hour-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="hour-2">-</div>
  </div>
  <div class="clock-symbol">
    :
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="min-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="min-2">-</div>
  </div>
  <div class="clock-symbol">
    :
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="sec-1">-</div>
  </div>
  <div class="clock-item">
    <div class="clock-txt" id="sec-2">-</div>
  </div>
</div>

子层的文字就可以动起来了！

对子层的.clock-txt下animation让元素位移，从 Y 轴的-100%位移到 Y 轴的100%，并设置时间为一秒，这时候基础的动画就完成了！

<style>
  .is-active .clock-txt {
    animation: clockSlide 1s infinite;
  }

  @keyframes clockSlide {
    0% {
      transform: translateY(-100%);
    }
    25%, 75% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
</style>

再来更多的是Javascript要操控元素的文字跟样式了

• 接下来的内容虽然操控html及css，但大多以javascript为主。
• 如果只想知道样式如何写，下面就不一定要看罗。
• 如需说明的更加详细，再麻烦提出疑问。

setClock() 方法，每秒执行方法

1. 首先会有setClock()方法，以setInterval每1000毫秒执行一次方法里的程序。
2. setInterval内会new Date()，就可以拿到当前的时间。
3. 接着就把date丢到setTimeTxt(date)内执行。

setTimeTxt(date) 方法，写入文字

1. 执行setTimeTxt(date)时，须将丢入date参数。
2. 接着会去寻找各自的id，并将对应的值写入。

• Math.floor为无条件舍去法。 ex: Math.floor(38 / 10) ==> 3
• %为取得商数。 ex: 12 % 10 ==> 2

<script>
  function setTimeTxt(date) {
    document.getElementById('hour-1').innerText = Math.floor(date.getHours() / 10);
    document.getElementById('hour-2').innerText = date.getHours() % 10;
    document.getElementById('min-1').innerText = Math.floor(date.getMinutes() / 10);
    document.getElementById('min-2').innerText = date.getMinutes() % 10;
    document.getElementById('sec-1').innerText = Math.floor(date.getSeconds() / 10);
    document.getElementById('sec-2').innerText = date.getSeconds() % 10;
  }

  function setClock() {
    setInterval(() => {
      const date = new Date();
      setTimeTxt(date);
      toggleAnimation(date);
    }, 1000);
  }

  setClock();
</script>

只有异动的数字要有animation效果

透过上方的aniamtion及javascript，已经可以让数字有动态效果，但本篇希望可以将「有变化的数字作移动」就好，这时候就可以以javascript操控元素的样式animation-play-state，让元素的animation暂停，以下为设置元素的动画paused或running的判断。

toggleAnimation(date) 方法，操控元素的样式

1. setTimeout250毫秒，方法内的程序会在250毫秒後才执行。
2. 以#sec-1为例，是设定秒钟的十位数，在秒数%10的商为9时才让动画演绎，不然都让动画暂停。

<script>
  function toggleAnimation(date) {
    setTimeout(() => {
      if (
        (date.getHours() % 10 === 9 || date.getHours() === 23) && 
        date.getMinutes() % 60 === 59 && 
        date.getSeconds() % 60 === 59
      ) {
        document.getElementById('hour-1').style.animationPlayState = "running"
      } else {
        document.getElementById('hour-1').style.animationPlayState = "paused"
      }

      if (date.getMinutes() % 60 === 59  && date.getSeconds() % 60 === 59) {
        document.getElementById('hour-2').style.animationPlayState = "running"
      } else {
        document.getElementById('hour-2').style.animationPlayState = "paused"
      }

      if (date.getMinutes() % 10 === 9 && date.getSeconds() % 60 === 59) {
        document.getElementById('min-1').style.animationPlayState = "running"
      } else {
        document.getElementById('min-1').style.animationPlayState = "paused"
      }

      if (date.getSeconds() % 60 === 59) {
        document.getElementById('min-2').style.animationPlayState = "running"
      } else {
        document.getElementById('min-2').style.animationPlayState = "paused"
      }

      if (date.getSeconds() % 10 === 9) {
        document.getElementById('sec-1').style.animationPlayState = "running"
      } else {
        document.getElementById('sec-1').style.animationPlayState = "paused"
      }
    }, 250);
  }
</script>

所以～透过html、css、javascript的组合技并运用Slot动画的概念，做出一款数字变化时有动画的时钟！

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