Guión

SignalR informa a un oyente de los cambios que deben reflejarse en la interfaz de usuario. Cuando los datos subyacentes cambian, informamos a los usuarios sin discapacidades visuales del cambio agregando un efecto de animación antes de eliminarlo 3 segundos después.

Pregunta

¿Cuál de las siguientes ' Opciones de código ' se considera la mejor práctica al agregar/eliminar el efecto de animación? Alternativamente, ¿hay otra opción que no haya considerado que podría ser mejor? ¿O debería ser situacional?

Consideraciones personales

La opción ' Booleana ' se siente más limpia, pero es un elemento más que se observa en un objeto reactivo, y es probable que muchos de estos cambien de una sola vez. Si modificamos manualmente el DOM sin usar un objeto reactivo, podría ahorrar algunos gastos generales, pero no se siente tan limpio.

Opciones de código

Actualizar clase en booleano

 connection .on("EventName", (response: ResponseModel) => { const foo = this.FooArray .find((fooDetails: FooArrayModel) => fooDetails.Id === response.Id); foo.Name = response.Name; foo.HasUpdated = true; setTimeout(() => { foo.HasUpdated = false; }, 3000); });

 <div class="row"> <template v-for="foo in FooArray" :key="foo.Id"> <div class="cell" aria-live="polite" :class="{ 'animation-class': foo.HasUpdated }">{{foo.Name}}</div> </template> </div>

Actualizar clase en ID

 connection .on("EventName", (response: ResponseModel) => { const foo = this.FooArray .find((fooDetails: FooArrayModel) => fooDetails.Id === response.Id); foo.Name = response.Name; const element = document.getElementById(foo.Id); element.classList.add("animation-class"); setTimeout(() => { element.classList.remove("animation-class"); }, 3000); });

 <div class="row"> <template v-for="foo in FooArray" :key="foo.Id"> <div class="cell" aria-live="polite" :id="foo.Id">{{foo.Name}}</div> </template> </div>