Question

我有一个元素，比如<p></p>，这是一个实时更新号码。

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

之前有人有任何想法/做过这样的事吗？

Answer 1

在这里看一下这个例子：

$('p').html("This is new text").hide().fadeIn(1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Hello</p>

Answer 2

你可以有两个元素，我们将在其中交替设置新值＆amp;可以在这两个中有动画。所以它看起来像是一个连续的价值链。

示例代码：

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>

Answer 3

对于重复的淡入/淡出，您只需使用一个CSS @keyframes动画即可。

工作示例：

var paragraph = document.getElementsByTagName('p')[0];
var value = 0;
var maxValue = 12; // <= this is your calculation from your API response
paragraph.classList.add('animate-value');

function incrementValue() {
    value++;
    paragraph.textContent = value;
    
    if (value === maxValue) {
        paragraph.classList.remove('animate-value');
        clearInterval(animateValue);
    }
}

var animateValue = setInterval(function(){incrementValue();}, 1500);

div, p {
width: 200px;
height: 200px;
margin: 0;
font-size: 140px;
line-height: 200px;
color: rgb(255,255,255);
background-color: rgb(0,0,0);
text-align: center;
font-weight: bold;
}

.animate-value {
animation: animateValue 1.5s linear infinite;
}

.show-value {
opacity: 100;
}

@keyframes animateValue {
    0% {opacity: 0;}
   25% {opacity: 100;}
   50% {opacity: 100;}
   75% {opacity: 0;}
  100% {opacity: 0;}
}

<div>
<p></p>
</div>

Answer 4

或者一个脚本，将旧元素移到顶部，然后在底部添加一个新元素？：

var words=[];
var el={style:{}};
window.onload=function(){
   setInterval(function(){
        //add new values to old elem
       el.style.top="0px";
       var word=words.unshift();
      if(word){
          document.body.appendChild(el=document.createElement("p"));
          //new elems values
          el.style.top="100px";
          el.innerHTML=word;
      }
  },2000);
};

然后执行以下css（使其顺利）：

p{transition:all ease 2s;}

要添加新单词，请执行以下操作：

words.push("1");

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

4 个答案: