Tengo un elemento, digamos <p></p>, que es el número de actualización en vivo.

La cuestión es que necesito animar este número de forma similar a este: codepen.io - pero no tengo idea de cómo debería hacerlo. No tengo alcance de números: se calculan en función de la respuesta API y se colocan en mi <p></p>.

Alguien tiene alguna idea / hizo algo como esto antes?

0
nixealice 14 ene. 2017 a las 17:17

4 respuestas

La mejor respuesta

Puede tener dos elementos, en los que estableceremos el nuevo valor alternativamente y podemos tener animación entre estos dos. Entonces se verá como una cadena continua de valores.

Un código de muestra:

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>
2
Ankit Chaudhary 14 ene. 2017 a las 14:59

¿O qué tal un guión, que mueve los elementos antiguos a la parte superior y luego agrega uno nuevo en la parte inferior ?:

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

Luego haga el siguiente css (para que sea suave):

p{transition:all ease 2s;}

Para agregar nuevas palabras, haga esto:

words.push("1");
1
Jonas Wilms 14 ene. 2017 a las 14:54

Para una repetición de aparición / desaparición gradual, simplemente puede usar una sola animación CSS @keyframes.

Ejemplo de trabajo:

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>
2
Rounin 14 ene. 2017 a las 22:34

Echa un vistazo a este ejemplo aquí:

$('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>
2
codenut 14 ene. 2017 a las 14:36