数字easeInOut动画效果数字的动画效果，日常项目中经常用到的功能。通过简单的css进行样式控制即可。操作上轻松简单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outCount,
    .count,
    .showCount {
      position: absolute;
      display: inline-block;
    }

    .count,
    .showCount {
      left: 54px;
    }

    .showCount {
      z-index: 11;
    }

    @keyframes FadeOut {
      0% {
        top: 0;
      }

      100% {
        top: 22px;
      }
    }


    @keyframes FadeIn {
      0% {
        top: -22px;
      }

      100% {
        top: 0;
      }
    }

    .hideCount {
      display: none;
    }

    .showCount {
      display: inline-block;
      animation: FadeIn 0.3s ease-in forwards;
    }

    .outCount {
      animation: FadeOut 0.3s ease-out forwards;
    }

    #demo {
      text-align: center;
      border: 1px solid;
      width: 150px;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      position: relative;
      margin-top: 50px;
    }

    #btn {
      display: block;
      margin-top: 100px;
    }
  </style>
</head>
<div id="demo">
  <span style="margin-right: 5px;">您有</span>
  <span class="hideCount"></span>
  <span class="count">7</span>
  <span style="margin-left: 5px;">张免息券</span>
</div>
<button id="btn">点击查看效果</button>
<script>
  window.onload = () => {
    let demo = document.getElementById('demo'),
      btn = document.getElementById('btn'),
      countSpan = document.querySelector(".count"),
      hideCount = document.querySelector(".hideCount");
    let classes = countSpan.classList;
    let hideCountClasses = hideCount.classList;
    btn.onclick = function () {
      hideCount.innerText = "8"
      let flag = Array.from(classes).includes("outCount")
      if (flag) {
        classes.remove("outCount");
        countSpan.innerText = "7"
        hideCountClasses.remove("showCount");
      } else {
        hideCountClasses.add("showCount");
        classes.add("outCount")

      }
    }
  }
</script>

<body>

</body>

</html>