Как я могу обновить значение на веб-сайте?

Question

У меня есть элемент, скажем <p></p>, который является обновляемым обновлением.

Дело в том, что мне нужно анимировать это число аналогично этому: codepen.io - но я не знаю, как мне это сделать. У меня нет объема чисел - они рассчитываются на основе ответа API и помещаются в мой <p></p>.

У кого-нибудь есть идеи/что-то подобное раньше?

Answer 1

Вы можете иметь два элемента, в котором мы установим новое значение в качестве альтернативы & может иметь анимацию между этими двумя. Таким образом, это будет выглядеть как непрерывная цепочка ценностей.

код Пример:

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 2

Взгляните на этот пример здесь:

$('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 3

Или как насчет сценария, который перемещает старые elems к вершине, а затем добавляет новый в нижней части ?:

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"); 

Answer 4

При повторном выцветанию в/выцветанию, вы можете просто использовать один 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>