从 websocket 更新数据时闪烁或闪烁文本

Posted 2023-02-16

【中文标题】从 websocket 更新数据时闪烁或闪烁文本

【英文标题】：Blink or flash text on update of data from websocket

【发布时间】：2020-02-29 08:34:37

【问题描述】：

将 vuejs 与单个文件组件和 vuex 一起使用。数据通过 websocket 连接流入，我使用 Vuex 来管理状态并绑定数据以显示在各种组件中。这一切都很好。

我只是在组件文件中使用 mapState，然后在 html 中显示该值。

对于某些数据，我想在值更改时应用一些转换。 IE。 - 闪烁/闪烁值 - 闪烁/闪烁背景颜色

我正在显示数值，并且认为当数字变大时会短暂闪烁绿色，而当数字变小时会短暂闪烁红色。仍在争论我是否要闪烁实际文本或包含文本的 div。还在争论是否要在短暂的颜色闪烁后将颜色恢复为黑色。

有没有办法在 vuejs 中轻松做到这一点？我了解如何使用计算值，但是当值从 vuex 更新时，如何触发一些颜色变化动画。

【问题讨论】：

设置一些在值更新时会改变的颜色属性，并将它们用作内联css。

我认为这可以用于设置对象的静态颜色（我在其他地方使用此方法。）如何“闪烁”或动画颜色？

【参考方案1】：

您有多种选择，具体取决于您最终决定的效果。

这是最简单的解决方案。在 computed getter 上使用 watcher 和条件类来设置您的值的样式。

data: 
  myValue: 
    prev: 150,
    latest: 100
  
,
computed: 
  valueInStore() 
    return this.$store.getters.value
  
,
watch: 
  valueInStore(newValue, oldValue) 
    this.myValue.prev = oldValue
    this.myValue.latest = newValue
  

要显示正确的 css 类，然后

<div :class="getColorClass(myValye)"> myValue.latest </div>

...

methods: 
  // method instead of computed since you were talking about multiple values
  getColorClass(foo) 
    return this.myValue.prev < this.myValue.latest ? 'green' : 'red'
  ,

根据您的需要，您可能需要针对prev == latest 的情况进行调整。

现在您可以在.green 和.red 类中使用任何您想要的css 样式或动画。