1

Tengo una tabla con objetos. Cada objeto tiene una hora y minuto asociada (a su ultima modificación).

Ilustrativo algo así:

Imagen ilustrativa

Me gustaría que si es la misma misma hora. Se aplique un color a toda la fila (durante 5 segundos).

Estuve probando algunas cosas para intentar añadir y quitar clases despues de 5 segundos con Javascript.

Por el momento tengo esto:

 <tr #row *ngFor="let order of orders; index as i" (onload)="getIsNew(order,row)" [ngClass]="{...}">

Mi idea era que al cargar le agregue la clase 'is-new' a la #row y a los 5 segundos quitarsela.

El problema es que directamente no ingresa a la funcion getIsNew().

Seguramente esté haciendo algo mal con el evento (onload) desde Angular.


La segunda opción fue usar [ngClass]. De tal manera quedaba así:

<tr #row *ngFor="let order of orders; index as i" [ngClass]="{'is-new': getIsNew(order,row)}">

donde getIsNew() es esta función:

getIsNew(order: Order, row:any):boolean{
  return order.dataOfcreation.hour == this.date.getHour();
}

el problema es que permanece la clase 1 minuto entero (la comparación de las horas es HH:MM). No me gustaría agregar los segundos a estas horas.

2
  • ¿Y en qué parte establece la duración en un minuto?
    – Lobos
    el 28 sep. 2022 a las 18:47
  • Me equivoqué al expresarme. El cambio impacta en lo que quede de minuto. Porque detecta la ultima modificación y compara con la hora actual. el 28 sep. 2022 a las 18:49

1 respuesta 1

2

En la clase .is-new podrías agregar una animación que espere 5 segundos para quitar el color de fondo de la fila:

<!DOCTYPE html>
<html>

<head>
    <style>
        .is-new {
            background-color: red;
            animation: example 0.5s forwards;
            animation-delay: 5s;
        }

        @keyframes example {
            100% {
                background-color: unset;
            }
        }
    </style>
</head>

<body>
    <table>
        <tr class="is-new">
            <td>dato 1</td>
            <td>dato 2</td>
            <td>dato 3</td>
        </tr>

    </table>
</body>
</html>

2
  • Eso me ayuda, me da una base muy grande con lo que quiero hacer. El problema surge con background-color: unset. Quita el color que tenía antes y si le asigno el color que tenía antes, directamente no me modifica el color. el 28 sep. 2022 a las 19:12
  • Bueno. Logré hacerlo. Solamente setee al momento del 0% el color que quería. Muchas gracias. el 28 sep. 2022 a las 19:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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