Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[andi2204]

Hallo miteinander,

ich versuche nun seit Tagen eine Lösung für folgendes Problem zu finden:

Für einige Werte in der VIS (1), soll eine farbliche Animation/gerne auch als reines „blinken“ erfolgen, sobald sich der Wert verändert/aktualisiert hat. Nach dem was ich so gelesen haben, kann man das entweder über das sog. Binding oder direkt in der CSS lösen?!

Gibt es Unterschiede in der Perfomance des Systems, wenn man 50 Werte ständig Animiert oder per blinken visualisiert?
Hat jemand bereits was vergleichbares umsetzten können? Falls ja wie kann man das Umsetzen ohne das System unnötig zu belasten?

Danke und viele Grüße aus Süddeutschland

Andi

[OliverIO]

@andi2204

hier vom prinzip her, die animation kannst du dann ja selber anpassen

1. im css reiter die folgenden 2 anweisungen ergänzen.
   einmal die animation und zum 2. die css klasse namens newValue deren die animation zugewiesen ist.
   Wenn man eine helle Oberfläche hat, dann color:#fff mit color:black tauschen

.newValue {
    animation: newValueAnimation 2s ease-in-out;
}
@keyframes newValueAnimation {
    0% {
        color: green;
    }
    100% {
        color: #fff;
    }
}

2. widget hinzufügen (ich habe ein einfaches string widget genommen)
3. datenpunkt auswählen
4. im abschnitt generell im feld CSS Klasse das folgende Binding eintragen
   den datenpunkt anpassen und den selben den du in 3 ausgewählt hast eintragen

{val:0_userdata.0.datenpunkt.b1;"newValue"}

das sollte dann bei jeder änderung die animation auslösen.
Die Animation hab ich aus der Adminoberfläche genommen und vereinfacht.

[andi2204]

@oliverio

1000 DANK OliverIO...hat super geklappt!

[OliverIO]

@andi2204

zur performance wollt ich auch noch was schreiben.
die animation erfolgt ja komplett auf dem client,
von daher beslastet es nur den browser.
ich denke da wird es lange dauern bis man da was merkt.
eher mit den vielen bindings, die sind etwas aufwändiger.
aber 50 denke ich ist kein problem