在更新来自websocket的数据时闪烁或闪烁文本

Question

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

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

对于某些数据，每当值更改时，我都希望应用一些过渡。即-闪烁/闪烁值-闪烁/闪烁背景颜色

我正在显示数值，并且当数字增加时短暂闪烁绿色，而当数字减少时短暂闪烁红色，可能会觉得不错。仍在辩论是否要显示实际文本或包含文本的div。如果我想在短暂的彩色闪烁后将颜色恢复为黑色，也要进行辩论。

在vuejs中是否可以轻松地做到这一点？我了解如何使用计算值，但是当值从vuex更新时如何触发一些变色动画。

Answer 1

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

这里是最简单的解决方案。使用watch吸气剂上的computed er和条件类来设置值的样式。

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样式或动画。