2

Creo que lo que busco es fácil de entender pero no lo he logrado.

Tengo un momento en el que ocurre esto: document.getElementbyId(id).classList.add("error"); haciendo que este elemento obtenga la clase "error", y la clase .error es esta:

.error{
    transition-property: background-color;
    background-color:#ff3f3f;
    transition-duration:0.5s;
}

Esto funciona bien ya que cuando mi código detecta un error hay una transición suave donde mi, en este caso, <td> se vuelva rojo, el problema es que se queda rojo para siempre.

Lo que necesito es que este "pulso" vuelva al estado inicial de color, que es "ninguno", o lo que es lo mismo eliminar la clase (con un fadeout o transición del .error)

No sé muy bien cómo organizarlo ya que es un juego y al pulsar sobre una celda () errónea quiero que emita un pulso rojo y vuelva a su estado. He probado con document.getElementById(id).classList.remove("error") pero no me funciona, sigue en rojo para siempre.

Y el tema de las animaciones y transiciones no lo domino como quisiera.

Me valdría cualquier idea para realizar el toque de atención de "movimiento erróneo".

Adjunto el código total: https://jsfiddle.net/bay20es4/

Gracias

PD: Efecto "Pulso" con este codigo:

@keyframes error-animation {
0% {  }
50% { background-color:#ff3f3f}
100% {  }

}

2
  • Cuanto tiempo quieres que se quede rojo? el 16 feb. 2022 a las 13:40
  • Me gustaría que quedara en rojo como 1s o menos y que volviera con un fadeout a su estado normal
    – Viral
    el 16 feb. 2022 a las 14:25

1 respuesta 1

2

Para ello es facil hacerlo con javascript y de igual forma con css, ejecuta una animacion solamente que dure x tiempo, reemplaza esto por todo lo que tienes en error css

  .error{
         animation-name: error-animation;
        animation-duration: 3s;
        -webkit-animation-name: error-animation;
        -webkit-animation-duration: 3s;
    }
    @keyframes error-animation {
        0% {  }
        100% { background-color:#ff3f3f}
    }
2
  • 1
    Funciona perfecto, quizá fallé con el "@keyframes".
    – Viral
    el 16 feb. 2022 a las 14:29
  • que bueno que te funcione el 16 feb. 2022 a las 14:30

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.