javascript - 如何在网站上动画更新值？

Question

我有一个元素，比如说 <p></p> , 为实时更新数。

问题是我需要以类似于此的方式为这个数字设置动画:codepen.io - 但我不知道我应该怎么做。我没有数字范围 - 它们是根据 API 响应计算并放入我的 <p></p> .

有人有过这样的想法/做过这样的事情吗？

Answer 1

你可以有两个元素，我们将在其中交替设置新值并且可以在这两个元素之间有动画。所以它看起来像是一个连续的值(value)链。

示例代码:

var i=0;
function changeValue(){
  var newValue=Math.floor((Math.random() * 100) + 1);
  document.getElementById('item'+i).innerHTML=newValue;
  if(i==0)
    i=1;
  else
    i=0;
}
setInterval(changeValue,2000);

@import 'https://fonts.googleapis.com/css?family=Work+Sans:800';
body {
  background-color: #000;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
}
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 44px;
}
#loader span {
  display: block;
  position: absolute;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation: count 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
          animation: count 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
#loader span:nth-child(1) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
#loader span:nth-child(2) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
@-webkit-keyframes count {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes count {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

<div id="loader">
  <span id='item0'></span>
  <span id='item1'></span>

</div>