CSS - Evento onchange

 
Vista:
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por Marta (32 intervenciones) el 21/03/2021 12:53:30
Buenas,
Tengo un elemento, input, label, div, me da igual, con un número. Según algunas acciones en la web, este número se incrementa o decrementa.
Me gustaría que al cambiar de valor (el valor lo cambio por javascript), animar la salida del valor actual, por ejemplo se fuera abajo, y el nuevo valor, bajara de arriba.
El problema es que no sé en css, detectar el cambio de valor, no es focus, no es blur,
Agradeceré una pista. Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por Marta (32 intervenciones) el 21/03/2021 13:29:38
Buenas, no me gusta mucho lo que he hecho, pero de momento sirve:
- es un textbox con readlonly
- desde javascript, cuando cambio el valor, provoco un focus()
- desde css, trato el vento focus

Si alguien saber una manera mejor ... muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por joel (252 intervenciones) el 21/03/2021 13:40:46
Hola Marta nos puedes compartir el código de como haces la simulación del movimiento del numero?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por Marta (32 intervenciones) el 21/03/2021 14:12:25
Hola Joel, sí, como no!!

Estos son los input type=text que modifico el valor y quiero animar el cambio:
1
2
<div>Encerts: <input type=text id="act2Encert" value=0 readonly></div>
<div>Errors:  <input type=text id="act2Error" value=0 readonly></div>

Este el código de cuando han respuesto una pregunta, si es correcto, se suman los aciertos, y sinó, los errores.
1
2
3
4
5
6
7
8
9
10
11
12
if (correcto) {
    encerts = $("#act2Encert").val();
    encerts++;
    $("#act2Encert").val(encerts);
    $("#act2Encert").focus();
} else {
    errors = $("#act2Error").val();
    errors++
    $("#act2Error").val(errors);
    $("#act2Error").focus();
    return;
}

Y aquí vendría la animación css, aún por implementar:
1
2
3
#act2Encert:focus {
    background-color:  red;
}

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por joel (252 intervenciones) el 21/03/2021 14:38:46
Gracias por compartirlo Maria!!!

ya nos mostraras como haces la animación!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Evento onchange

Publicado por Marta (32 intervenciones) el 21/03/2021 18:11:38
Buenas, le he estado dado vueltas, y no veo como animar el valor anterior, por lo que sólo voy a animar el nuevo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar